Font Awesome은 인터넷으로 제공되는 아이콘 라이브러리 툴킷이라고 생각하시면 됩니다. 예전에는 아이콘을 사용하려면 직접 아이콘 파일을 서버에 올려서 사용했다면 Font Awesome을 이용하면 가져다가 쓰시기만 하면되니 편리하죠.
Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.
내가 원하는 아이콘이 없을 수는 있지만 단순히 아이콘만 가져오는것이 아닌 재가공이 가능하기때문에 사용해보면 편리한것을 알 수 있습니다. 폰트어썸은 현재 6.21버전까지 나왔지만 부분유료이기도 하고 4.7버전만 해도 675개의 아이콘을 이용할 수 있어서 간단하게 사용하기에는 좋습니다.
사용법은 다음구문을 <head></head>사이에 넣어주면 준비는 끝났습니다.
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">이제 사이트에 접속하셔서 사용하고자 하는 아이콘을 찾아서 i태그에 넣어주기만하면 끝입니다.
https://fontawesome.com/v4/icons/
Font Awesome Icons
Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des
fontawesome.com
예를 들어 버스아이콘을 가져오겠습니다. 아이콘을 넣고싶은 위치에 다음 코드를 넣어주면됩니다.
<i class="fa fa-bus"></i>이렇게 버스가 나타납니다.
기본적인 사용법은 이렇고 색상,크기,애니메이션같은 효과는 다음글에서 다루겠습니다.
'FRONT-END > TIP & ETC' 카테고리의 다른 글
| Spring Boot : Swagger 적용 및 기본 사용법 (0) | 2022.12.22 |
|---|---|
| Font Awesome(폰트어썸) 아이콘 색상,크기,회전,애니메이션 효과주기 (0) | 2022.11.30 |
댓글