아이콘 폰트 폰트어썸(Font Awesome) 목록과 적용방법

안녕하세요. 예화 사랑입니다. 오늘은 아이콘 폰트 폰트어썸(Font Awesome) 에 대해 자세히 알아보는 시간 가지도록 하겠습니다. 요즘 홈페이지나 블로그에 폰트어썸(Font Awesome)을 많이 활용하고있는 추세입니다. 사용하기 쉽고 아이콘이 깔끔해서 홈페이지나 블로그를 보다더 돋보이게 새줍니다. 적절한곳에 잘 배치한다면 아기자기하고 이쁘게 연출할수가 있습니다. 이 아이콘폰트의 모든 목록은 폰트어썸 홈페이지인 https://fontawesome.com/ 에가시면 모든 아이콘폰트를 확인하실수가 있으며 적용할수있는 코드 또한 바로 복사할수있도록 편의를 제공하고있습니다.

1. 폰터 어썸 사용준비 - 스타일시트 연결하기

https://fontawesome.com/start

위 링크를 클릭하면 아래와 같이 나옵니다.

위 빨간 네모박스 부분을 클릭하면 소스가 복사가 됩니다. 이걸 홈페이지나 블로그의 <head> 부분에 넣어주셔야 폰터어썸을 사용하실수가 있습니다. 기본 준비작업이라고 보시면 됩니다.버젼이 계속 업데이트 되기때문에 직접 홈페이지에 가셔서 최신코드를 복사해서 넣어주시는게 좋습니다. 현재는 5.81버젼이군요. 혹시 직접 가기 귀찮으신 분은 아래 소스를 복사하셔도 됩니다. 단 최신버젼이 아닐수도 있습니다.

<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" 
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
crossorigin="anonymous">

티스토리 fastboot 스킨사용자는 이미 아래와 같은 스타일시트 로딩 구문이 있으니 참고하세요.예전버젼을 사용했습니다.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" 
rel="stylesheet" />

2. 폰트 어썸 사용방법

폰트어 썸 홈페이지에 가셔서 아이콘 메뉴를 클릭해 보시면 아래와 같이 여러종류의 아이콘 폰트를 보실수가 있습니다. 이중에서 넣어야할 아이콘 폰트를 하나 선택하셔서 클릭해 보세요~

아이콘을 클릭하시면 아래와 같은 페이지가 나올겁니다.

저는 종모양의 아이콘을 선택해보니 위아 같이 나왔습니다. 빨간네모박스 부분이 벨모앙의 아이콘폰트 소스입니다.

위 코드가 벨모양의 아이콘폰트를 나오게하는 html 소스입니다.

폰트어썸(Font-Awesome)은 이미지가 아닌 폰트이기 때문에 HTML의 Font-style을 적용할 수 있습니다.

예제를 통해서 바로 알아보도록 하겠습니다.

위 소스처럼 폰트 스타일을 지정할수가 있습니다. 폰트색상과 폰트크기를 지정해보았습니다.

뿐만아니라 ccs 도 적용할수가 있습니다. 예제를 볼까요?

<style type="text/css">

.myccs{color:#f68181;font-size:50px;}

</style>

그리고 아이콘폰트 크기는 위 두가지 방법으로도 변경이 가능하지만 자체지원하는 코드로도 변경할수가 있습니다.

아이콘을 33% 확대합니다.
아이콘을 2배 확대합니다.
아이콘을 3배 확대합니다.
아이콘을 4배 확대합니다.
아이콘을 5배 확대합니다.

 아이콘을 33% 확대합니다.

 아이콘을 2배 확대합니다.

 아이콘을 3배 확대합니다.

 아이콘을 4배 확대합니다.

 아이콘을 5배 확대합니다.

또한 아이콘을 리스트로 열거할경우 아이콘크기나 여백이 일정하지 않아 열이 정령되지 못한 느낌이 들때가 있습니다. 이때를 위해 아이콘을 빈여백을 제거해줌으로써 깔끔하게 정리가 잘되어 보이게끔해주는 코드를 알려드리겠습니다.탐색목록(nav list), list group 등에서유용하게 사용합니다.

Home Library Applications Settings

<div class="list-group">

<a class="list-group-item" href="#">  Home</a>

<a class="list-group-item" href="#">  Library</a>

<a class="list-group-item" href="#">  Applications</a>

<a class="list-group-item" href="#">  Settings</a>

</div>

또한 폰트어썸 자체 기능으로 회전기능이 있는데요 요것도 알아두시면 유용하실겁니다. 저는 설정아이콘을 회전시켰는데 뱅글뱅글도는게 재미있기도하고 설정아이콘 찾기도 쉽고 괜찮더군요. 많이 사용하시느것 보다 한개정도 포인트준다 생각하시고 돌려주시는것도 좋을듯합니다.^^

또한 중첩된 아이콘을 만들수가 있습니다. 즉 두개의 아이콘을 합친다하고 생각하면 쉬울것 같습니다.fa-stack 클래스를 갖는 상위요소 밑에 fa-stack-2x(큰아이콘) 클래스와 fa-stack-1x(작은아이콘) 클래스를 갖는 2개의 하위 요소 태그를 사용해 중첩된 아이콘을 생성할 수있으며 fa-inverse 클래스를 추가 색상 반전을 할 수있습니다. 예제를 통해 배우는게 좋을듯하군요~^^

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera

fa-twitter on fa-square-o

fa-flag on fa-circle

fa-terminal on fa-square

fa-ban on fa-camera

3. FASTBOOT 스킨에서 많이 사용하는 아이콘 폰트 리스트

아이콘 name	아이콘 사용	아이콘 name	아이콘 사용
cogs	관리자	lock	Logout 상태
unlock	Login 상태	Home	Home
bars	글제목	tags	태그
user	댓글 name	lock	댓글 password
check	댓글 달기	comment	Notice
list	Category	file-o	Writings
comments	Comments	random	Trackbacks
link	Links	rss	RSS Feed
info-circle	information	angle-double-up	toTop

이 외에도 아래와 같은 아이콘들이 있습니다.

- flash -> 번개모양

- pencil -> 연필모양

- calendar -> 달력모양

- folder -> 폴더모양

- search -> 돋보기모양

- credit-card -> 카드모양

4. 마무리 한마디

이렇게 해서 아이콘폰트인 폰트어썸 사용방법에 대해 알아보았습니다. 이제 좀 감이 잡히시죠? 무료 아이콘이 엄청 많으며 웹브라우져 호완성 문제도 없고 로딩속도도 빠르며 크기나 색상조절이 자유롭고 편해서 많은 웹마스터분들 그리고 블로거분들이 많이 이용하는 아이콘 폰트입니다. 제가 소개해드린 기능 정도만 알아도 자유롭게 사용하실수가 있을겁니다. ^^ 제 글이 도움이 되셨다먄 공감과 구독 부탁드리며 이만 줄이도록 하겠습니다. 즐거운 하루 되세요~^^

저작자표시

'정보나라' 카테고리의 다른 글

FastBoot 보안접속(https) 설정후 비보안접속 아이콘 해결팁 (0)	2019.04.24
티스토리 티에디션의 대안 스킨커버 이식하기 (3)	2019.04.23
티스토리 블로그 인기글 최신글 사이드바에 넣기 (0)	2019.04.21
대구지역 국비지원 무료교육 [한국디지털직업전문학교] (0)	2019.04.20
버츠비튼살크림/임산부튼살크림추천 소양증 피부가려움 (0)	2019.04.13
상견례 옷차림,상견례 장소,상견례 선물, 인사예절 팁 (0)	2019.03.30
무료 샌드에니웨어(send-anywhere) 어플/유틸 와이파이 무선 파일전송 (0)	2019.03.14
유튜브(youtube) 동영상 다운로드 방법 총정리 [모바일/pc] (0)	2019.03.12