아이콘 ‘Font Awesome’ 사용하기
업데이트:
Font Awesome이란?
FontAwesome은 웹페이지에서 사용할 수 있는 아이콘 라이브러리이다.
FA는 5.xx버전과 4.xx버전이 있는데 5.xx버전이 일부 유료화가 되면서, 프로덕션에서는 4.xx를 많이 사용하는 편이다.
4.7.0기준 링크와 같이 675개의 아이콘이 제공되고 있다.
실제 활용
1
2
3
4
5
6
7
8
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
/>
</head>
<i class="fa fa-address-book" aria-hidden="true"></i>
어떻게 동작할까?
css 명세를 보면, 아래와 같이 before:로 content를 보여주고 있다.
1
2
3
4
5
6
7
8
.fa {
...중략
font: normal normal normal 14px/1 FontAwesome;
}
.{className}:before {
content: "\f2b9"
}
아이콘들이 FontAwesome 폰트 파일에 저장되어있고, 원하는 아이콘 유니코드를 로드해 아이콘을 사용하는 것이다.
댓글남기기