폰트어썸 웹 아이콘 적용 (fontawesome)

http://fortawesome.github.io/Font-Awesome/icons/

 

폰트어썸은 이미지로 아이콘을 제작하고 불러오는 번거로운 과정을 생략하고 간편하게

웹아이콘을 코드로 불러와서 사용할수있는 편리한 사이트입니다.

 

 

사용방법은

1. head 와 head 사이에 다음 구문을 넣어줍니다.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

 

2. 그 다음 원하는 위치에 다음 코드를 넣어주시면 적용됩니다.

<i class="fa fa-camera-retro"></i>

     

사이즈별로

 

<i class="fa fa-camera-retro fa-lg"></i>

<i class="fa fa-camera-retro fa-2x"></i>

<i class="fa fa-camera-retro fa-3x"></i>

<i class="fa fa-camera-retro fa-4x"></i>

<i class="fa fa-camera-retro fa-5x"></i>

   

이렇게 로딩되는 아이콘 등 다양한 종류가 있네요~

 

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

 

다양한 아이콘 코드는 폰트어썸 홈페이지 내에서 찾아볼수있습니다.

http://fortawesome.github.io/Font-Awesome/icons/