Font Awesome 4 / 아이콘을 목록(ul, ol)의 마커로 사용하기
Font Awesome의 아이콘을 ul, li 등의 목록의 마커로 사용할 수 있습니다. 이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다.
아이콘 선택하기
마커로 사용할 아이콘을 선택하고, font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다. 예를 들어 화살표 angle-right의 코드는 다음과 같습니다.
.fa-angle-right:before { content: "\f105"; }
기본 마커 없애기
순서 없는 목록 ul의 기본 마커는 동그란 점입니다.
list-style-type 속성으로 마커를 없앱니다.
ul { list-style-type: none; }
아이콘 추가하기
:before 선택자와 content 속성을 이용하여 아이콘을 li 요소 앞에 넣습니다.
li:before { content: "\f105"; font-family: FontAwesome; }
margin 등을 이용하여 여백을 조정합니다.
li:before { content: "\f105"; font-family: FontAwesome; margin-left: -1.0em; margin-right: 0.5em; }
전체 코드
다음은 위 내용을 담은 전체 코드입니다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>Coding Factory</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> body { font-family: sans-serif; } ul { list-style-type: none; } li:before { content: "\f105"; font-family: FontAwesome; margin-left: -1.0em; margin-right: 0.5em; } </style> </head> <body> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo.</li> <li>Aliquam vitae aliquet ipsum.</li> </ul> </body> </html>