[HTML/CSS] 웹 개발 - 무료 아이콘 삽입하기 / 사이트 추천(fontawesome)

깔끔한 UI를 제공하는 아이콘 사이트를 소개한다. 

주소는 아래와 같다. 

https://fontawesome.com/icons

Font Awesome

HTML에서 아이콘을 삽입하기 위해 아래와 같이 스크립트 관련 코드를 삽입해준다. 

아래는 5.15.3버전을 이용한 것임을 참고바란다. 

<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>

 

실제로 사용할 때에는 아래 코드를 이용한다.

fa-music이라 되어 있는 부분에 아이콘의 모양을 넣으면 되고, fa-stack-1x 와 fa-inverse 등은 옵션이다.  

<i class="fas fa-music fa-stack-1x fa-inverse"></i>

 

아이콘이 삽입된 이미지

 

 

아이콘 검색

검색 화면

 

다른 이모티콘을 사용하고 싶다면 사이트에서 검색을 하면 된다. 

예를 들어, card라고 검색했을 때 아래와 같이 나온다. 

 

여기서 pro로 표기되어 있는 것은 무료로 사용할 수 없고, 표시되어있지 않은 것만 무료로 사용 가능하다. 

 

 

여러 옵션들

(fa-inverse는 색상을 반전해주어 흰색으로 표현된다.)

(fa- stack-1x는 크기이다. 2x로 했을 경우 아래와 같다. )