[CSS] 가상요소에 폰트어썸(Font Awesome) 사용하기

폰트어썸이란(Font Awesome)?

폰트어썸(Font Awesome)은 벡터 기반의 아이콘 라이브러리입니다. 웹 개발자들이 웹사이트 또는 애플리케이션에서 아이콘을 사용할 때 유용하게 활용할 수 있습니다. 그래픽 폰트 또는 아이콘 폰트라고도 합니다.
폰트어썸같은 그래픽 폰트를 사용하면 벡터 기반의 웹폰트 입니다. 이에 따라오는 장점이 많습니다.

그래픽 폰트를 사용하는 이유

1. 화면 해상도에 따른 다른 크기별 이미지를 준비하지 않아도 됩니다.
2. 크기, 색상, 애니메이션등 속성의 조절이 쉽고 용이합니다.
3. 제공되는 CDN이 다양해서 페이지가 무거워지는 것을 최소화 할 수 있습니다.

기본 사용법

모든 아이콘이 무료인 4.7기준으로 설명을 드리겠습니다.
head 안에 CDN주소로 CSS 파일을 불러옵니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

공식홈페이지 fontawesome.com/v4/icons/ 에서 원하는 아이콘을 찾아 해당 아이콘의 i 태그를 복사해옵니다.
이제 원하는 곳에 붙여 넣기 하면 끝~

<i class="fa fa-bath" aria-hidden="true"></i>

가상요소에 폰트어썸 적용

폰트어썸을 사용하다 보면 대부분 디자인요소 이다 보니 특정 태그 추가 없이 가상요소로 넣을때가 필요한 경우가 있습니다.
폰트어썸이 웹폰트라는 개념으로 보면 font-family만 설정하면 되는것인데 해당 키값은 키보드에 없는 값이기에 유니코드로 글자를 입력하면 됩니다. 다음은 p태그에 가상요소를 활용한 코드 입니다.

p::before {
   content: "\f2cd";
   font-family: 'FontAwesome';
}

content에 들어간 것이 유니코드이고 해당 그래픽폰트 글자의 고유 키값 이라고 할 수 있습니다.
/(슬래쉬)가 아닌 \(역슬래쉬)임을 주의해 주세요.

폰트어썸 유니코드 모음

폰트어썸 4.7 (Free Version) 기준입니다.