fontawesome - icon

 

 

 

FontAwesome을 통해 이미지 파일을 대신하여 아이콘을 넣는 방법에 대해 정리해두자 

 

https://fontawesome.com/

Font Awesome

 

 

우선은 동작하는 원리를 익히기 위해 하위 버전으로 해보자.

1. Font Awesome 4 (Latest Version: 4.7.0)

 

FontAwsesome 사용을 위한 CSS,Font 파일은 미리 다운로드를 받아두자.

 

 

FontAwseome.zip

0.61MB

 

 

이제 FontAwesome을 통해 icon을 사용할 준비를 해보자.

 

1. CSS 연동을 통한 사전 준비

<link rel="stylesheet" href="css/font-awesome.css">

 

2. 사용할 icon을 가져와서 적용해보자.

 

icon 검색

 

html5 이미지에 대한 fontawesome 소스를 가져와서 그대로 적용하면된다.

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

 

- 적용 예시 

<div class="header_icon">
                <ul>
                    <li><a href="#"><i class="fa fa-html5" aria-hidden="true"></i><span>HTML5</span></a></li>
                    <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i><span>Github</span></a></li>
                    <li><a href="#" class="Facebook"><i class="fa fa-facebook-square" aria-hidden="true"></i><span>Facebook</span></a></li>
                    <li><a href="#" class="twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i><span>twitter</span></a></li>
                </ul>
            </div>

별도 CSS가 적용된 모습