SonMan's IT BBS: Html : 재미있는 폰트 아이콘. "Font Awesome"

2015년 12월 2일 수요일

Html : 재미있는 폰트 아이콘. "Font Awesome"

요즘 보면 참 별의 별게 다 만들어진다.
이런 생각은 어떻게 한 것일까 신기할 정도다.

요즘 폰트 아이콘이란게 쓰이고 있는데, 막상 써보면 기존의 아이콘이랑 다를게 없어 보인다. 근데, 좀 다르다.

기존의 아이콘들은 이미지 파일을 서버에 올려놓고 그 이미지를 링크해 보여 주는것이다.
하지만, 폰트 아이콘은 그것과는 다르다. 근본적인 차이는 폰트 아이콘은 이미지를 사용하지 않는다. 말그대로 웹폰트를 사용한다.

즉, 사용자의 컴퓨터의 폰트를 쓰는게 아니라, 웹에 폰트를 올려 놓고 쓰는 웹폰트를 이용해서, 글자가 아닌 아이콘들의 모임인 웹폰트를 서버에 올려 놓고, 그 웹폰트에 등록되어 있는 문자들을 아이콘으로 사용하는 것이다.

이게 궂이 이렇게 할 이유가 있나? ... 싶지만, 확실한 장점이 있다.

첫째. 이미지가 아니라 사실상 "글자" 이므로 크기의 변경이 자유롭다.

둘째. 웹폰트를 만들때 벡터형식으로 만드므로, 크기의 변경시 자연스럽게 확대된다.
셋째. 폰트파일로 아이콘 패키지처럼 활용 할 수 있어 설치 및 이용이 쉽다.

물론 단점도 있다. "글자" 이기 때문에 "단색" 아이콘 밖에는 쓸수 없고, 등록된 아이콘이 많아서 폰트 크기가 커지면 사이트 전체적으로 로딩이 느려질수 있다.

장단점은 있지만, 암튼 꽤 재미있는 방식이다.

이런 방식의 폰트 아이콘중에 유명한게 "Font Awesome"

http://fontawesome.io/

위의 이미지의 가운데에 보이는 "성" 그림이 있는데, 이게 "이미지"가 아니라 "글자" 다.
즉, "성" 모양을 글자로 폰트에 등록에 그 글자를 이미지 처럼 사용한 것이다.

해당 사이트의 아이콘 메뉴를 보면 현재까지 제작된 아이콘들이 있는데, 계속 추가 되고 있으니 가끔 확인해 보는것도 좋다.

쓰는 방법이야, 그냥 해당 폰트 패키지를 다운 받아 사용할 웹서버에 올려 놓고 쓰면 된다.

배포 파일을 다운받아 압축을 풀어보면 폰트 파일들이 있는것을 볼수 있다.
이 폰트를 웹폰트로 등록해서, 이 폰트 내의 문자들을 아이콘으로 쓴다.
그냥 압축 풀어 웹서버에 올려 놓고, 같이 배포되는 스타일 시트 링크만 기록해 놓으면 간단히 사용 할 수 있다.

그게 귀찮으면...

<!doctype html>
<html lang="ko">
<head>
<title>Icon</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div>
    <i class="fa fa-camera-retro"></i> fa-camera-retro<br/>
    <i class="fa fa-camera-retro fa-lg"></i> fa-lg<br/>
    <i class="fa fa-camera-retro fa-2x"></i> fa-2x<br/>
    <i class="fa fa-camera-retro fa-3x"></i> fa-3x<br/>
    <i class="fa fa-camera-retro fa-4x"></i> fa-4x<br/>
    <font color="red"><i class="fa fa-camera-retro fa-5x"></i> fa-5x</font><br/>
</div>
</body>
</html>

그냥 공식사이트에서 쓰고 있는 CSS 파일 링크를 기록만 해줘도 된다.
물론 이렇게 하면 약간 속도가 느림감이 있으므로, 자신이 운영할 서버에 올려 놓고 쓰면 속도 향상에 도움이 된다.
하여간, 이렇게 하면...