본문 바로가기

퍼블리싱/HTML | CSS | Javascript

글자 아이콘, fontawsome

홈페이지를 만들다보면 아이콘을 넣을 일이 굉장히 많다. 이런 짜잘짜잘한 아이콘을 다 포토샵에서 잘라가지고 저장해가지고 업로드해서 경로쓰고.....때에따라선 크기도 일일이 css로 조절하고... 얼마나 귀찮은지 ;ㅅ;

 

이런 귀찮음을 줄여주는 Font Awesome!

 

 

http://fontawesome.io/

 

fontawsome은 한마디로 font icon이다. 우리가 웹상에서 쓰는 텍스트와 똑같이 아이콘을 만드는것. 그래서 css로 color지정도 굉장히 쉽다.

 

폰트어썸을 사용하려면, 직접 파일을 업로드 하는 방법도 있겠지만 역시 가장간편한건 cdn주소를 사용하는거다 :)

 

<head></head> 사이에

 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 

이것만 써주면 끝! 그리고 필요한게 있으면 폰트 어썸에서 아이콘을 검색해서 태그만 복붙하면 된다 ㅎ.ㅎ

 

class명을 줌으로써 크기 조절, 돌리기, 반전 등등 여러가지 기능을 사용할수 있다. 진짜 겁나편리함.

 

 

 

 

728x90

'퍼블리싱 > HTML | CSS | Javascript' 카테고리의 다른 글

css rwd grid  (0) 2017.04.05
CSS - flexbox  (0) 2017.04.05
background animate  (0) 2017.04.04
jquery-ui 2  (0) 2017.04.02
jquery-ui 1  (0) 2017.04.02