[Html] 웹 폰트 아이콘 Font Awesome(폰트 어썸) 사용법
- Web/HTML, CSS
- 2018. 6. 30.
웹사이트를 만들때 아이콘은 필수적인 요소입니다. 아이콘을 사용하면 방문자들에게 좀 더 직관적으로 기능에 대해 어필이 가능하죠. 웹사이트의 기능을 글로 설명하는것이아니라 아이콘 하나로 대체함으로써 좀 더 깔끔한 웹페이지 구축도 가능합니다. 웹사이트에 픽토그램(그림문자)을 쉽게 넣는 방법이 있습니다. 바로 웹 아이콘 폰트를 사용하는 것인데요. 웹 아이콘 폰트는 여러 종류가 있으나 그 중에서 Font Awesome가 제일 유명합니다. Font Awesome이란 이러한 웹 아이콘 폰트를 모아놓은 라이브러리입니다. 이번 포스팅에서는 Font Awesome의 사용법에 대해 다뤄보려 합니다.
Font-Awesome의 장점
1. Html Font 속성이 모두 사용 가능하다.
Font-Awesome은 이미지가 아닌 폰트이기 때문에 HTML의 Font-style을 적용할 수 있습니다. 이것은 굉장히 큰 장점인데요. 가령 Font-Awesome이 이미지였다고 생각해봅시다. 그럼 크기를 변경시킬때마다 이미지의 크기도 늘려야하고, 색을 변경시킬때마다 이미지의 색상도 변경해주어야 할 것입니다. 하지만 Font-Awesome은 그럴 필요가 없습니다. 간단하게 소스 몇줄만 추가해주면 크기도 늘릴 수 있고 색상도 변경할 수 있죠.
<i class="fa fa-lock" aria-hidden="true" style="color:#2353a5;font-size:100px;"></i>2. CSS를 적용시킬 수 있다.
Font-Awesome에는 Css를 적용시켜 웹사이트만의 고유한 스타일로 응용할 수 있습니다. 일반적으로 크기나 색상 그림자효과와 같은것을 Css로 통일시켜 사용합니다.
<style type="text/css">
.pinkstyle{color:#f68181;font-size:50px;}
</style>
<i class="fa fa-lock pinkstyle" aria-hidden="true" ></i>3. 브라우저 호환성 문제가 적다.
웹사이트를 제작할때 가장 신경쓰이는 부분이 Crome에서는 돌아가는데 Explorer에서는 안되고 이런 웹 브라우저 호환성 문제가 상당히 짜증납니다. 하지만 Font-Awesome은 자바스크립트가 사용되지 않기때문에 이런 호환성문제가 거의 없습니다.
4. 무료 아이콘이 많다.
Font-Awesome에는 상당히 많은 무료 아이콘이 있습니다. 유료인것도 있지만 워낙 무료 아이콘의 갯수가 많기때문에 유료결제 하시는분은 거의 없으실거에요. 아이콘 배포목적이 아니라면 상업적인 용도로도 활용하실 수 있으니 홈페이지를 제작하면서 무료아이콘 이미지를 찾아다니는 수고를 줄일 수 있습니다.
5. 원하는 아이콘을 찾기가 수월하다.
원하는 아이콘 찾는 과정이 간단합니다. 기존의 픽토그램 사이트에가서 자신이 원하는 아이콘을 찾을 필요가 없습니다. 아래의 링크에서 검색만 해주시면 됩니다.
Font-Awesome 사용법
1. CDN 선언
폰트 어썸을 사용하는 방법은 두가지가 있습니다. 첫번째 방법은 CDN을 삽입하고 아이콘을 특정 클래스 명으로 호출해 사용하는 방법입니다. 두번째 방법은 직접 원하는 아이콘을 다운받아 활용하는 방식이 있는데 대부분 CDN방식을 많이 사용합니다.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><head>부분에 위의 코드를 삽입시켜줍니다. 버전은 상이할 수 있습니다.
2. 아이콘 출력
<i class="fa fa-camera"></i> 3. 아이콘 색상 변경
<span style="color:blue"><i class="fa fa-camera fa-5x"></i></span>
4. 아이콘 크기 변경
<i class="fa fa-camera fa-lg"></i> <!-- 33% 크기 -->
<i class="fa fa-camera fa-2x"></i> <!-- 2배 크기 -->
<i class="fa fa-camera fa-3x"></i> <!-- 3배 크기 -->
<i class="fa fa-camera fa-4x"></i> <!-- 4배 크기 -->
<i class="fa fa-camera fa-5x"></i> <!-- 5배 크기 -->
5. 아이콘 테두리 적용
<i class="fa fa-quote-left fa-pull-left fa-border" aria-hidden="true"></i>
6. 아이콘 방향 회전
<i class="fa fa-shield"></i>
<!-- normal -->
<i class="fa fa-shield fa-rotate-90"></i>
<!-- fa-rotate-90 -->
<i class="fa fa-shield fa-rotate-180"></i>
<!-- fa-rotate-180 -->
<i class="fa fa-shield fa-rotate-270"></i>
<!-- fa-rotate-270 -->
<i class="fa fa-shield fa-flip-horizontal"></i>
<!-- fa-flip-horizontal -->
<i class="fa fa-shield fa-flip-vertical"></i>
<!-- fa-flip-vertical -->
7. 아이콘 회전 적용
<i class="fa fa-spinner fa-spin fa-fw"></i>
<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
<i class="fa fa-refresh fa-spin fa-fw"></i>
<i class="fa fa-cog fa-spin fa-fw"></i>
<i class="fa fa-spinner fa-pulse fa-fw"></i>
8. 아이콘 중첩
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<!--fa-twitter on fa-square-o-->
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<!--fa-flag on fa-circle-->
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<!--fa-terminal on fa-square-->
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
<!--fa-ban on fa-camera-->
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 시맨틱 태그(Semeantic Tag)란 무엇인가? (3) | 2022.12.06 |
|---|---|
| [Html] HTML이란 무엇인가? (feat HTML5) (0) | 2022.12.05 |
| [Html] 으로 만드는 테트리스 게임 (5) | 2018.06.29 |
| [Html] 으로 만드는 간단한 장애물 피하기게임 (2) | 2018.06.28 |