Font Awesome의 Unicod를 가상(疑似) 클래스의 의사 요소 :before / :after에 사용하기
"Font Awesome"을 의사 요소(疑似要素)"인 :before와 :after의 'content' 속성에서 "Font Awesome"의 "Unicode(유니 코드)"를 넣어 아이콘을 표시합니다.
'content' 속성 직접 HTML을 코딩할 수 없기 때문에, 아이콘의 "Unicode"를 넣습니다.
각 아이콘의 Unicode는 아래의 페이지에 게재되어 있습니다.
http://fontawesome.io/cheatsheet/
《Example1》 Unicode를 " :before"에 넣기
<style>
h1:before {
content: "\f206";
font-family: FontAwesome;
}
</style>
<body>
<h1>BICYCLE</h1>
</body>
:before : { } 에 아이콘의 형태를 지정한다.
content: 여기에서는 "\f206" Unicode를 지정한다. = html에서는 fa fa-bicycle
font-family: : 문자가 "Font Awesome' 라는 것을 직접 지정한다.
▼ 결과、
BICYCLE
로 표시됩니다.
링크문(文)에서 Font Awesome 아이콘을 :after에 표시하기
이번에는 ":after" 의사 요소를 사용하여, 링크가 걸린 문장에 마우스를 대면 문장 끝에 fa fa-bicycle 아이콘이 나타나도록 CSS를 만들어 보겠습니다.
<style>
a {font-size:1em;color: #666666;}
a.bicycle:hover{color:#ff00ea;}
a.bicycle:hover:after{content:"\f206"; font-family:"FontAwesome";color:#ff00ea;}
</style>
<body>
<a class="bicycle" href="#">자전거를 타고 바다에 가자!</a>
</body>
▼ 이하의 링크 문장에 마우스를 갖다 대 보면, 문장 끝에 자전거 아이콘이 표시됩니다.
스폰서 링크