1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> <!-- <link rel="stylesheet" href="css/font-awesome.min.css" /> --> <style> /* - 장점 : 아이콘을 이미지가 아닌 폰트로 사용한다는게 가장 큰 장점이다. 벡터방식으로 화면 확대시 해상도에 관계없이 아이콘이 깨지지 않는다. 모든 웹사이트에 적용 가능하다. 무료오픈소스 - 단점 : 아이콘이 일정 수준 이상으로 커지면 아이콘의 외곽선 부분이 거칠게 보이기도 한다는 것 */ .fa-camera { color:#CC181E; } </style> </head> <body> <div> <i class="fa fa-camera fa-5x fa-spin"></i> <!-- i 태그에 class명만 넣어주면 끝. --> </div> </body> </html> |
예제 : http://fortawesome.github.io/Font-Awesome/icons/
반응형
'CSS' 카테고리의 다른 글
| [CSS] background 좌표값 쉽게 얻어주는 사이트 (0) | 2015.04.10 |
|---|---|
| [CSS] keyframe animation - 연속으로 이미지 바뀌는 애니메이션 효과 (5) | 2015.04.06 |
| [CSS] border 투명도(opacity) 적용하기 (0) | 2015.03.27 |
| [CSS][jQuery] :target - a태그 내부링크 타겟 요소에 css적용 (0) | 2015.02.09 |
| [CSS] table-cell div 수직 수평 정렬 (0) | 2015.01.28 |
