[bootstrap] 부트스트랩 – 폰트 아이콘(Graphicons) 사용하기

부트스트랩은 3.0 버전부터 폰트 아이콘을 사용합니다.

이전의 그래픽 아이콘인 Glyphicons를 폰트로 변환해서 사용하고 있습니다.
폰트 아이콘은 폰트의 성질을 그대로 갖고 있으므로 색상은 물론 font-size 속성을 이용해 크기도 변경할 수 있습니다.

 

<span class=”glyphicon glyphicon-search” aria-hidden=”true”></span>

 

기본 사용법은 span 태그를 사용하고 span 태그에는 내용이 없어도 아이콘이 표시됩니다.
span 태그 안에 글자를 넣으면 아이콘 뒤에 글자가 표시됩니다.

aira-hidden=”true”는 웹 접근성 측면에서 표시해 줍니다. 아이콘이 유니코드로 된 글자기 때문에 읽지 못하도록 차단하는 역할을 합니다.

 

http://getbootstrap.com/components/

이곳에 가면 수많은 아이콘들을 보실 수 있는데요. 아이콘에 있는 이름을 class에 넣어주시면 사용할 수 있습니다.

 

기본 아이콘 200개를 사용할 수 있구요.

더 많은 아이콘을 사용하시려면 폰트 어썸(Font-awesome)을 사용해서 500개 이상의 아이콘을 사용하실 수 있습니다.

[bootstrap] 부트스트랩 – 폰트 아이콘을 모아놓은 폰트 어썸(Font awesome) 사용하기