[CSS] Font Awesome Icon을 사용하여 홈페이지를 디자인하기
최근 개인 블로그나 홈페이지 등의 웹 사이트에서, 아래의 간단한 아이콘이 있는 메뉴를 자주 볼 수 있습니다. 이것은 웹 글꼴(Web Font)의 일종인 "FontAwesome"를 사용한 것입니다.
과거에는 아이콘 이미지를 사용하여 표현했지만, 이 경우 이미지를 확대하거나 축소할 때 아이콘 이미지가 들쭉날쭉하게 원래의 형태가 일그러지거나 제작에 시간이 걸려 불편했습니다.
그러나, "FontAwesome Icon"은 벡터(Vector) 형식이기에 크기 조절도 깨끗한 상태로 표시할 수 있습니다.
크기 및 색상 등도 CSS를 사용하여 쉽게 조절할 수 있습니다. 종류도 600 종류 이상으로, 사용법도 매우 간단합니다. 계속 업데이트가 되고 있어서, 사용할 수 있는 아이콘이 더욱 늘어나고 있습니다.
Font Awesome 사용방법
Font Awesome를 사용하는 방법에는, CDN 코드를 사용한 표시 방법과 파일을 다운로드하여 서버에 두고 이용하는 방법의 두 가지가 있습니다.
1. CDN서버의 CSS 파일에 연결
외부 서버인 CDN 서버에서 Web 글꼴을 아래 링크 요소를 사용하여 HTML 소스의 <head>〜</head>사이의 원하는 위치에 붙여 넣습니다.
이것은 자신의 웹 서버에 Font Awesome을 설치하지 않아도 사용할 수 있다는 장점이 있습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
▼ 다음으로, 아래와 같이 <body>〜</body>사이에 직접<i></i> 태그와 class 이름을 넣는 것만으로 간단히 표시할 수 있습니다.
<body> <i class="fa fa-subway"></i> </body> </html>
결과, 페이지에는 이렇게 "지하철" 아이콘이 표시됩니다. ⇒
2. Font Awesome 폰트를 자신의 서버에 설치
CDN 서버를 이용하지 않고 Web 폰트 파일을 자신의 서버에 직접 설치하여 사용할 수 있습니다.
우선 "Font Awesome"글꼴 다운로드
▼ 공식 다운로드 사이트를 방문하여 "Download" 버튼을 클릭하면 다운로드 할 수 있습니다. 아래와 같이 ZIP 파일로 압축되어 있기 때문에, 자신의 PC에 폴더를 만들고 거기에 파일을 압축 해제 합니다.
스폰서 링크
압축이 풀린 파일을 자신의 서버에 업로드
자신의 서버 환경에 맞추기 위해 폴더나 파일 이름을 변경할 필요가 없으면, 그대로 통째로 업로하는 것이 간단하게 작업이 끝나리라 생각됩니다.
자신의 서버의 "상대 경로"에 링크 걸기
글꼴 읽어들이기가 제대로 작동하도록 파일이 업로드된 서버의 정확한 디렉터리 이름을 써 줍니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../font-awesome-4.3.0/css/font-awesome.min.css"">
</head>
이제 CDN 서버를 빌리지 않고 자유롭게 이용할 수있게 되었습니다.
이제 CSS와 함께 아이콘 하나를 만들어 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>Icon Design(아이콘 디자인) </title>
<link rel="stylesheet" href="../font-awesome-4.3.0/css/font-awesome.min.css"">
<style>
.icon-design {
width: 60px;
height: 60px;
text-align: center;
vertical-align: middle;
display: table-cell;
border-radius: 30px;
color: #ffffff;
background-color: #089ee1;
font-size: 30px;
}
</style>
</head>
<body>
<p class="icon-design">
<i class="fa fa-cloud-download"></i>
</p>
</body>
</html>
▼ 결과, 클라우드 다운로드 아이콘가 아래와 같이 표시되었습니다.
Cloud Download
스폰서 링크