WEB개발이야기/웹퍼블리싱

폰트어썸 (Font Awesome) 아이콘 폰트 사용하기

어쩌다보니여기까지~ 2018. 7. 10. 23:27

아이콘 폰트인 폰트어썸 (Font Awesome)을 사용하는 방법입니다. 아이콘폰트가 무엇인지 궁금하면 이전에 포스팅한 아이콘 폰트(Icon font) 자유자제로 사용하기를 먼저 읽어 보시는 것을 추천합니다.

폰트어썸 (Font Awesome)

Font Awesome 홈페이지

폰트어썸 (Font Awesome) 홈페이지 바로가기

폰트어썸은 가장 유명한 대표적인 아이콘폰트 제공 사이트 입니다.
다양한 형태의 아이콘이 빠르게 업데이트되고 있으며 깃헙에서 51000여개의 star를 받고 있을 정도로 사랑을 받고있습니다.
현재 유료서비스를 시도하고 있긴하지만 무료로 사용할 수 있는 아이콘도 현재까지 675개나 되어서 상당히 인기가 높습니다.

다만 주의 할 점은 GPL라이선스를 따른다는 것입니다. GPL라이선스는……

Fonts 아이콘

설치 방법

설치는 크게 2가지로 나누어지는데.. CDN을 통해서 설치하는 방법과 아이콘 폰트를 다운로드받아서 설치하는 방법이 있습니다.

CDN 설치

가장 간단하게 사용할 수 있는 CDN설치는 특별히 아이콘을 커스터마이징 할 일이 없을 떄 사용하면 됩니다.
폰트어썸의 CDN 주소를 적용하고자 하는 웹사이트의 <hrad>태그 영역에 styleseet를 불러오는 것 처럼 링크를 걸어주면 됩니다.

웹사이트의 <head> 태그영역 안에 아래의 코드를 삽입합니다.

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

**CDN이란? : ** CDN은 **C**ontent **D**elivery **N**etwork의 앞글자로 접속자가 인터넷상에서 가장 가까운 곳의 서버로 컨텐츠를 전송받아 트래픽이 특정 서버에 집중되지 않고 각 서버로 분산되도록 하는기술입니다 (구글검색) 소스제공자가 CDN을 전문으로 서비스하는 `googleCDN`이나 `BootstrapCDN`, `jsdelivrCDN`에 소스를 올려놓으면 일반사용자가 제공 되어지는 CDN의 `URL`을 링크하여 사용하는 방식으로 **오픈소스**에서 많이 활용되고 있습니다.

다운로드하여 설치

다운로드하여 약간의 커스터마이징을 하거나 오프라인상태에서도 사용하기 위해서는 아이콘 폰트를 다운로드 받아서 설치해야 합니다.

폰트어썸 다운로드

해당 URL에서 DOWNLOAD 버튼을 클릭합니다.
팝업창에서 가장 아래에 있는 No thanks, just download Font Awesome 4를 클릭합니다. 초록색 버튼의 Font Awesome Pro는 유료 버전입니다.
다운로드한 아이콘 폰트를 웹사이트의 적절한 위치에 저장을 합니다.
웹사이트의 <head> 태그영역 안에 font-awesome.min.css 파일 위치를 아래와 같이 링크를 겁니다.
```
<link ="stylesheet" type="text/css" href="path/to/font-awesome/css/font-awesome.min.css">
```

다운로드를 하여 사용할 경우 css뿐만이 아니라 CSS 프리프로세서인 `LESS`나 `SASS`를 활용하여 사용할 수도 있습니다.

사용 방법

사용방법은 CDN 설치를 사용했던, 다운로드 설치를 사용했던 동일한 방법으로 사용할 수 있습니다. 아이콘이 나타나기를 원하는 위치에 아래의 코드 처럼 삽입하면 됩니다.

기본 적용

<i class="fa fa-camera-retro"></i> fa-camera-retro

<i>택그에 class명으로 아이콘의 종류를 선택할 수 있습니다.

class를 설명하자면 fa는 font awesome의 앞글자로 Font Awesome을 사용한다는 선언이고 그 뒤에는 fa-다음에 나오는 글자는 아이콘명을 의미합니다.
아이콘은 Font Awesome 페이지에서 아이콘명을 찾아서 적용하면 됩니다.

아이콘 크기변경 (Larger Icons)

fa-lg, fa-2x, fa-3x, fa-4x, fa-5x CLASS를 적용하여 기본 크기 외에 다양한 크기의 아이콘을 나타낼 수 있습니다.

크기 지정

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

아이콘 넓이고정 (Fixed Width Icons)

fa-fw CLASS를 적용하여 아이콘의 종류와 상관없이 좌우측 공백 포함 넓이를 고정하여 리스트를 깔끔하게 보이게 정리할 수 있습니다.

넓이 고정

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

리스트 블릿 변경 (List Icons)

UL 또는 OL 사용 시 기본으로 나오는 블릿을 제거하고 fa-ul와 fa-li CLASS를 적용하여 아이콘으로 대체를 할 수 있습니다.

아이콘 블릿

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

테두리 적용과 좌측 또는 우측 고정 아이콘 (Bordered & Pulled Icons)

fa-border CLASS로 아이콘의 테두리를 표시 할 수 있고 fa-pull-left 또는 fa-pull-right CLASS로 아이콘을 좌측 또는 우측으로 붙힐 수 있습니다.

아이콘 테두리

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

아이콘 애니메이션 (Animated Icons)

fa-spin CLASS를 적용하여 아이콘에게 움직이는 회전 애니메이션을 적용할 수 있습니다.

아이콘 에니메이션

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

아이콘 회전 (Rotated & Flipped)

fa-rotate-90, fa-rotate-180, fa-rotate-270, fa-flip-horizontal, fa-flip-vertical CLASS를 적용하여 아이콘을 회전 시키거나 좌우 또는 상하 반전을 시킬 수 있습니다. 애니메이션이 되지는 않습니다.

아이콘 회전

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

아이콘 테두리변경 (Stacked Icons)

<SPAN class=fa-stack>로 <i>를 감싸고 fa-stack-2x가 적용된 <i>태그를 추가하여 2개의 아이콘이 겹쳐서 마치 stack영역에 아이콘이 나오는 것 처럼 표현할 수 있습니다.

아이콘 테두리 변경

<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<br>
<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<br>
<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<br>
<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