<div id="readability-page-1" class="page"><div>
아이콘에 인터렉티브한 효과를 줄 경우 <code>SVG</code> 또는 <code>Base64</code>로 일일이 만들어 사용하는 경우가 있는데, 이 부분을 해결해줄 서비스가 있어 소개합니다.

<h2 id="font-awesome-소개">Font Awesome 소개</h2>

<blockquote>
 세계에서 가장 인기 있고 사용하기 쉬운 아이콘 세트
</blockquote>

폰트어썸은 1,200여 개 무료 아이콘과 2,300여 개의 유료(Pro) 아이콘 세트로 구성되어 있으며, 따로 파일을 받을 필요 없이 CSS 파일을 불러오기만 하면 해당 아이콘 세트를 사용할 수 있습니다.

 <a href="https://fontawesome.com/">https://fontawesome.com/</a>

<h2 id="폰트어썸-설정하기">폰트어썸 설정하기</h2>

<code>&lt;head&gt;</code> 안에 아래 종류 중 하나를 넣고 <code>&lt;body&gt;</code> 안에 <code>&lt;i&gt;</code> 또는 <code>&lt;span&gt;</code> 태그를 이용하여 아이콘을 불러올 수 있습니다.

<h3 id="all">All</h3>

<div><pre><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"&gt;
</code></pre></div>

<h3 id="solid">Solid</h3>

<div><pre><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous"&gt;
</code></pre></div>

<h3 id="regularpro">Regular(Pro)</h3>

<div><pre><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/regular.css" integrity="sha384-zkhEzh7td0PG30vxQk1D9liRKeizzot4eqkJ8gB3/I+mZ1rjgQk+BSt2F6rT2c+I" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous"&gt;
</code></pre></div>

<h3 id="brands">Brands</h3>

<div><pre><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE" crossorigin="anonymous"&gt;
&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous"&gt;
</code></pre></div>

<h2 id="폰트어썸-사용하기">폰트어썸 사용하기</h2>

<a href="https://fontawesome.com/icons?s=solid">Solid</a>와 <a href="https://fontawesome.com/icons?s=brands">Brands</a>는 무료로 사용할 수 있고, <a href="https://fontawesome.com/icons?s=regular">Regular</a>와 <a href="https://fontawesome.com/icons?s=light">Light</a>는 Pro 버전 구매 시 이용 가능합니다.

<table>
 <thead>
 <tr>
 <th>스타일</th>
 <th>라이선스</th>
 <th>접두사</th>
 <th>예시</th>
 <th>아이콘</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Solid</td>
 <td>무료</td>
 <td>fas</td>
 <td>&lt;i class=”fas fa-stroopwafel”&gt;&lt;/i&gt;</td>
 <td></td>
 </tr>
 <tr>
 <td>Regular</td>
 <td>유료(Pro)</td>
 <td>far</td>
 <td>&lt;i class=”far fa-stroopwafel”&gt;&lt;/i&gt;</td>
 <td>Pro 구매 시 적용 가능</td>
 </tr>
 <tr>
 <td>Light</td>
 <td>유료(Pro)</td>
 <td>fal</td>
 <td>&lt;i class=”fal fa-stroopwafel”&gt;&lt;/i&gt;</td>
 <td>Pro 구매 시 적용 가능</td>
 </tr>
 <tr>
 <td>Brands</td>
 <td>무료</td>
 <td>fab</td>
 <td>&lt;i class=”fab fa-font-awesome”&gt;&lt;/i&gt;</td>
 <td></td>
 </tr>
 </tbody>
</table>

<h2 id="아이콘-검색하기">아이콘 검색하기</h2>

3,600여 개가 되는 아이콘을 일일이 찾기가 어렵기 때문에 <a href="https://fontawesome.com/icons">사이트</a> 내 검색창에 키워드로 검색하여 쉽게 아이콘 코드를 알 수 있습니다.
유니코드도 제공하고 있어 <a href="https://fontawesome.com/cheatsheet">치트시트</a>를 통해 한 번에 확인 가능합니다.

</div></div>

코딩 공부방

아이콘에 인터렉티브한 효과를 줄 경우 SVG 또는 Base64로 일일이 만들어 사용하는 경우가 있는데, 이 부분을 해결해줄 서비스가 있어 소개합니다.
Font Awesome 소개
세계에서 가장 인기 있고 사용하기 쉬운 아이콘 세트
폰트어썸은 1,200여 개 무료 아이콘과 2,300여 개의 유료(Pro) 아이콘 세트로 구성되어 있으며, 따로 파일을 받을 필요 없이 CSS 파일을 불러오기만 하면 해당 아이콘 세트를 사용할 수 있습니다.
 https://fontawesome.com/
폰트어썸 설정하기
<head> 안에 아래 종류 중 하나를 넣고 <body> 안에 또는 태그를 이용하여 아이콘을 불러올 수 있습니다.
All
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
Solid
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
Regular(Pro)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/regular.css" integrity="sha384-zkhEzh7td0PG30vxQk1D9liRKeizzot4eqkJ8gB3/I+mZ1rjgQk+BSt2F6rT2c+I" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
Brands
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/brands.css" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
폰트어썸 사용하기
Solid와 Brands는 무료로 사용할 수 있고, Regular와 Light는 Pro 버전 구매 시 이용 가능합니다.
스타일
 라이선스
 접두사
 예시
 아이콘
 
Solid
 무료
 fas
 
 
 
Regular
 유료(Pro)
 far
 
 Pro 구매 시 적용 가능
 
Light
 유료(Pro)
 fal
 
 Pro 구매 시 적용 가능
 
Brands
 무료
 fab
 
 
 
아이콘 검색하기
3,600여 개가 되는 아이콘을 일일이 찾기가 어렵기 때문에 사이트 내 검색창에 키워드로 검색하여 쉽게 아이콘 코드를 알 수 있습니다.
유니코드도 제공하고 있어 치트시트를 통해 한 번에 확인 가능합니다.

Font Awesome 아이콘 세트 소개

댓글