Main menu

Font Awesome | Font Awesome 아이콘을 목록(ul, ol)의 마커로 사용하기

FontAwesome의 아이콘을 목록(ul, li)의 마커로 사용할 수 있습니다.

이미지를 사용하는 것보다 코드는 약간 복잡해지지만, 다양한 아이콘을 사용할 수 있고 색이나 크기를 자유롭게 변경할 수 있다는 장점이 있습니다.

아이콘 선택하기

마커로 사용할 아이콘을 고릅니다. 그리고 font-awesome.css 파일에서 선택한 아이콘의 코드를 찾습니다.

예를 들어 angle-right의 코드는 다음과 같습니다.

.fa-angle-right:before {
  content: "\f105";
}

기본 마커 없애기

순서 없는 목록(ul)은 다음처럼 생겼습니다.

마커를 없앱니다.

ul {
  list-style-type: none;
}

아이콘 추가하기

아이콘을 li 요소 앞에 나오도록 합니다.

li:before {
  content: "\f105";
  font-family: FontAwesome;
}

여백을 적절이 조정합니다.

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>

Created on 2015-10-09 | Updated on 2015-10-09

이 글을 공유하기

Kakao