이번엔 아이콘,인포그래픽으로 쓰기 좋은 무료 아이콘폰트, 폰트어썸을 소개하고자 합니다.
이미지는 용량도 많고 이미지편집툴로 일일이 수정해야 하는데요, 폰트어썸은 벡터기반이라 크기를 키워도 깨지지 않고, HTML이나 CSS같은 웹언어만으로 이미지를 구현하고 색상 크기 등을 변경 할 수 있습니다.
좀 더 간편하게 아이콘이나 인포그래픽 등에 활용할 수 있지요!
이미지는 용량도 많고 이미지편집툴로 일일이 수정해야 하는데요, 폰트어썸은 벡터기반이라 크기를 키워도 깨지지 않고, HTML이나 CSS같은 웹언어만으로 이미지를 구현하고 색상 크기 등을 변경 할 수 있습니다.
좀 더 간편하게 아이콘이나 인포그래픽 등에 활용할 수 있지요!
폰트어썸(Font Awesome)이란?
 |
| Font Awesome |
폰트어썸 특징 및 장점
 |
| 출처: Font Awesome |
- 하나의 글꼴, 675 아이콘
- JavaScript가 필요 없으므로 호환성 문제 감소
- 모든 아이콘이 어떤 크기로도 확장 가능
- 상업적 용도로 사용 가능한 무료폰트
- CSS로 아이콘 색상, 크기, 그림자 등 쉽게 스타일 지정
- 벡터 아이콘으로, 고해상도 디스플레이에서도 멋지게 구현
- 모든 프레임 워크에서 훌륭하게 작동
- 치트시트로 바탕화면이나 완벽한 벡터세트 사용 가능
- 웹에서 아이콘에 액세스 할 수 있음
내용출처: Font Awesome 홈페이지
처음 이 폰트를 봤을때 매우 신선했답니다. 지금은 많이들 알고계셔서 자주 애용되고 있는 것 같습니다만.
아이콘은 무조건 이미지편집 툴로 제작하고, 수정해야 한다고만 생각했었는데 말이죠. 게다가 무료라니!
처음 이 폰트를 봤을때 매우 신선했답니다. 지금은 많이들 알고계셔서 자주 애용되고 있는 것 같습니다만.
아이콘은 무조건 이미지편집 툴로 제작하고, 수정해야 한다고만 생각했었는데 말이죠. 게다가 무료라니!
요새는 HTML과 CSS같은 웹코딩언어만으로 그래픽이나 효과를 구현하고 편집까지 하는 경우가 많습니다.
특히 트랜디한 외국 사이트들은 거의 그런 것 같아요. 반면 우리나라는 아직까지 플래시로 만든 배너나 웹사이트들도 많고, 메뉴까지 이미지를 사용하고 있습니다. 이런경우 용량도 많이 잡아먹어서 무겁게 느껴지지요. 게다가 플래시는 2020년엔 크롬에서 더이상 지원하지 않는다고 하죠...;;;
폰트어썸(Font Awesome) 블로그에 적용하기- Font Awesome CDN
그럼 지금부터 폰트어썸을 블로그에 적용시키는 방법을 알아보겠습니다. 크게 2가지가 있는데, 가장 쉬운 방법인 'Font Awesome CDN'을 이용해보도록 할게요.
 |
| Font Awesome CDN 코드 받기 |
'다운로드 없이 단 한 줄의 코드로 폰트어썸을 사용할 수 있습니다.' 라고 적혀있네요. 자신의 메일주소를 적고 보내기를 누르면 CDN코드가 발송됩니다.
 |
| 메일로 받은 폰트어썸 CDN |
이렇게 간단한 과정만으로 폰트어썸을 사용하기 위한 준비가 끝났습니다!
이제 아이콘 코드만 복사해서 원하는 곳에 붙혀넣기만 하면 됩니다.
이제 아이콘 코드만 복사해서 원하는 곳에 붙혀넣기만 하면 됩니다.
기본 코드
fa와 아이콘의 이름을 사용. <a>,<span>과 같은 인라인 요소와 함께 사용하도록 설계되었다네요.
fa-camera-retro
<i class="fa fa-camera-retro"></i>fa-camera-retro
예제 및 적용방법
- home
- square
- check-square
- Loading...
- fa-ban on fa-camera
단순히 크기 조절뿐만 아니라 회전시키고, 심지어는 겹쳐서 쓸 수 있기도 합니다.
 |
| 폰트어썸 모든 아이콘 목록 페이지 |
 |
| 원하는 아이콘의 코드를 손쉽게 복사할 수 있다 |
폰트어썸 한계 및 단점
- 일부 플랫폼의 브라우저는 움직이는 아이콘에 떨림현상이 발생함.
- CSS3 애니메이션은 IE8 - IE9에서 지원되지 않음.
- bootstrap(부트스트랩)CDN은 해외에 서버를 두고 있기 때문에 국내에서는 로딩속도가 느려지기도 함.
(부트스트랩: 오픈 소스 웹 디자인 프레임워크)
빠르고 가벼울거라 생각했는데, 국내에선 의외로 단점도 있군요.
찬양하면서 찾아보다가 발견한 내용인데,
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">이렇게 bootstrap(부트스트랩)CDN에서 불러오는 소스가 있는데 이건 속도가 잘 안 나온다네요. 부트스트랩 자체가 좀 느리답니다.
저는 다운받은 테마라 이미 웬만한건 다 설치가 되어 있는 상태라 확인해보았어요.
 |
| 니가 왜 거기서 나와...? |
애초에 폰트어썸이 부트스트랩을 위해 만들어진거라 외국은 거의 이걸 쓰나봐요.
(한국형 무료템플릿은 없는겁니꽈?)
굳이 사용해야 한다면,아래와 같은
cloudflare font-awesome CDN 에서 제공하는 것을 쓰는게 낫다고 하네요.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
메일로 받은건 고유CDN인데, 이 경우는 어떨지 모르겠네요.
가장 좋은 방법은 다운 받아서 직접 자신의 서버에 올린 후 로드하는 것이랍니다.
아무튼 로딩속도는 통신사마다 다르다고 하니 보편적인 사항이라 단언할 수는 없는 것 같네요.
폰트어썸(Font Awesome) 포토샵에서 사용하기- Font Awesome Download
- 메인에서 폰트어썸 파일을 다운 받습니다.
*초록색버튼 말고 회색버튼(No thanks, just download)을 누르세요. - 압축 해제 후 font 폴더에서 .otf , .ttf 폰트파일만 선택하여 설치 해줍니다.
- 아래 링크로 들어가서 원하는 아이콘 블럭복사 후 붙혀넣기하여 사용하시면 됩니다.
*글꼴명(font Awesome)선택하고 붙혀넣기 해주세요.
댓글 없음:
댓글 쓰기