font-awesome 설치 및 사용법 + 티스토리 적용

다운로드 및 설치

별도의 파일 업로드 없이 설치

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

이 코드를 head안에 넣어주면 설치가 끝입니다.
하지만 속도나 수정을 위해서 직접 자기 사이트에 파일들을 업로드 후 사용할 수도 있습니다.

자기 사이트에 업로드 후 설치

이 방법은 티스토리도 가능합니다. 아래 파일을 다운 후 파일 업로드를 이용하여 티스토리나 자기 사이트에 업로드 해주세요.

font-awesome.zip

티스토리의 경우 아래의 코드를 head태그에 써줍니다. 일반 사이트의 경우 경로만 바꿔주세요.

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

간단한 사용법

http://fortawesome.github.io/Font-Awesome/icons/ 이 주소로 들어간 후 원하는 아이콘을 클릭하면 html 코드가 나오는데 html사용 가능한곳에 입력하면 아이콘이 나옵니다.

<i class="fa fa-bluetooth"></i>

옵션

https://fortawesome.github.io/Font-Awesome/examples/를 참조했습니다.

크기 변경

<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

fa-lg fa-2x fa-3x fa-4x fa-5x

만약 아이콘이 짤려서 보인다면 line-height를 수정해보세요!

고정 폭

class에 fa-fw를 추가하면 고정폭을 사용할 수 있답니다!

<div class="list-group">

  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>

  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>

  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>

  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>

</div>

  Home   Library   Applications   Settings

간단 리스트

fa-ul과 fa-li를 추가하여 간단하게 리스트 형식을 만들 수 있습니다!

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

• List icons
• can be used
• as bullets
• in lists

테두리와 정렬

fa-border = 테두리
fa-pull-left = 좌측정렬
fa-pull-right = 우측 정렬

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>

...tomorrow we will run faster, stretch out our arms farther...

And then one fine morning— So we beat on, boats against the

current, borne back ceaselessly into the past.

...tomorrow we will run faster, stretch out our arms farther... And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

애니메이션

fa-spin은 지속적으로 돌리는 애니메이션이고, fa-pulse는 8번 뚝뚝 끊기면서 돌아가는 애니메이션 입니다.

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

<i class="fa fa-spinner fa-pulse"></i>

IE8 - IE9은 지원되지 않는 기능입니다!

회전과 뒤집기

<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

normal (기본)
fa-rotate-90 (90도 회전)
fa-rotate-180 (180도 회전)
fa-rotate-270 (270도 회전)
fa-flip-horizontal (좌우 반전)
fa-flip-vertical (상하 반전)

아이콘 겹치기

여러개의 아이콘을 겹치기 위해선, fa-stack클래스를 부모 요소에 넣어줘야 합니다. fa-stack-1x는 기본 사이즈, fa-stack-2x는 큰 사이즈 입니다. 추가적으로 fa-inverse를 넣으면 아이콘 색상이 반전됩니다.

<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-camerafa-ul

fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera