[CSS] FontAwesome Icon으로 이미지 아이콘을 작성하기

Prev 123 Next

"Font Awesome"의 장점은 아이콘이 텍스트로 인식되므로 크기와 색상을 자유롭게 설정할 수 있다는 것입니다.

웹 글꼴(Web Font)은 아래의 "Font Awesome" 사이트에 게재되어 있습니다.

원하는 아이콘 위에 마우스를 가져가서, 그 아이콘을 클릭하면 6 가지 패턴(크기)의 아이콘이 표시됩니다.

아이콘 이름과 class 이름 등이 기재되어 있어 그대로 복사하여 자신의 웹페이지의 원하는 곳에 붙여 넣기 하면 됩니다. 종류도 600 종류 이상으로, 버전이 계속 업데이트 되고 있으며, 사용법도 매우 간단합니다.

스폰서 링크

Font Awesome 아이콘의 기본 표시 방법

아이콘의 표시 방법에는 여러 가지가 있지만, 태그에 class 속성을 지정하는 방법으로 쉽게 표시할 수 있습니다. 다음과 같이 i요소에 class 속성을 지정하는 방법이 간단합니다.

"fa"라는 class 이름을 반드시 지정 한 후, "fa - ****"와 같은 class 이름을 지정합니다.

"Font Awesome" 아이콘은 "텍스트 형"이므로 일반 문자와 마찬가지로 CSS를 사용하여 크기 및 색상 등의 조정의 지정이 가능합니다.

HTML 소스의 <body>〜</body> 사이의 원하는 위치에 붙여 넣습니다. 태그뿐만 아니라 다른 요소도 사용할 수 있습니다.

인라인 요소 외에도 요소와 같은 블록 레벨 요소에도 사용할 수 있습니다. 다만, 요소는 블록 레벨 요소이므로, 단락 시작 부분에 아이콘이 위치합니다.

 <body>
  <i class="fa fa-cloud-download"></i>Cloud Download
 </body>

▲　요소의 결과 ⇒　Cloud Download

 <body>
  <p style="padding-left:50px;color:#F90;" class="fa fa-cloud-download"></p>Cloud Download
 </body>
</html>

▲　요소의 결과, ↓

Cloud Download

Font Awesome 아이콘을 좌우에 배치하기

Font Awesome 아이콘 다음에 pull-right와 pull-left의 class 이름을 붙입니다.

 <body>
   <i class="fa fa-futbol-o pull-right"> </i>SOCCER
   <i class="fa fa-university pull-left"> </i>UNIVERSITY
 </body>

SOCCER　 UNIVERSITY

「Font Awesome」아이콘에 테두리 붙이기

Font Awesome 아이콘 다음에 "fa-border"라는 class 이름을 붙입니다.

 <body>
   <i class="fa fa-futbol-o fa-border"> </i>SOCCER
   <i class="fa fa-university fa-border"> </i>UNIVERSITY
 </body>

SOCCER　 UNIVERSITY

여러 Font Awesome 폰트를 겹쳐서 하나로 표시하기

자주 사용되는 것이

 <body>
  <span class="fa-stack fa-lg">
   <i class="fa fa-twitter fa-stack-1x"></i>
   <i class="fa fa-square-o fa-stack-2x"></i>
 </span>
 ........
 </body>

Font Awesome 폰트를 사용하여 메뉴 리스트 만들기

 <body>
 <ul class="fa-ul">
   <li> <i class="fa-li fa fa-check-square"> </i>HOME </li>
   <li> <i class="fa-li fa fa-check-square"> </i>LIST </li>
   <li> <i class="fa-li fa fa-spinner fa-spin"> </i>CIRCLEs </li>
   <li> <i class="fa-li fa fa-square"> </i>SHARE </li>
 </ul>
 </body>

HOME
LIST
CIRCLEs
SHARE

아이콘의 애니메이션

메뉴 리스트 작성하기

Home Library Applications Settings

[CSS] FontAwesome Icon으로 이미지 아이콘을 작성하기

관련 기사