[웹디자인] 내 사이트에 아이콘을 쉽게 넣자. Font Awesome

웹디자인을 하면서 여러 그림과 아이콘이 필요할 때가 있습니다.

예쁜 사이트를 디자인하려면 아이콘은 필수니까요.

그리고 요즘은 심플하고 모던한 디자인을 선호하기 때문에 픽토그램을 많이 활용합니다.

출처 : https://www.freepik.com/free-vector/modern-web-design-button-collection-with-flat-design_3099383.htm

하지만 웹디자인에 아이콘을 넣으려면 어떻게 해야할까요?

일반적으로 <img> 태그를 이용하여 이미지를 불러와서 사용합니다. 그렇다면 수많은 아이콘 파일들을 서버에 저장해야 하죠.

그리고 나에게 필요한 아이콘을 찾아야 한다면?

아이콘 이미지를 찾기 위해 열심히 인터넷을 모험하게 될 것입니다. 웹디자인보다 검색에 시간을 더 많이 투자하겠네요.

하지만 Font Awesome을 사용하면 빠르고 쉽게 아이콘을 찾아 사용할 수 있습니다.

fontawesome.com/

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

728x90

1. Font Awesome 사용하기

Font Awesome의 홈페이지에 들어가면 크게 보이는 버튼 중, "Start for Free"을 눌러 회원가입을 하고 프로젝트를 등록하면 CSS 링크를 받을 수 있습니다.

하지만 그러한 과정은 너무너무나도 귀찮기 때문에 CDN으로 들어가서 링크를 얻도록 하겠습니다.

cdnjs.com/libraries/font-awesome

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your w

cdnjs.com

위의 사진에 빨간색 동그라미 친 all.min.css의 링크를 복사합니다.

html 문서의 <head></head> 사이에 붙여 넣어줍니다.

그 후 fontawesome.com/icons?d=gallery&m=free로 이동해서 아무 아이콘을 클릭해봅니다.

위의 아이콘을 아무거나 클릭하면 다음과 같은 모습이 나타나는데, 그중 빨간 선으로 표시한 부분을 클릭하면 그 내용이 복사가 됩니다. 그대로 아이콘을 넣고 싶은 곳에 붙여 넣어 실행해봅니다.

See the Pen FA 01 by wooncloud (@lomeiskk) on CodePen.

짠! 이렇게 아이콘을 쉽게 불러올 수 있습니다.

일부 아이콘은 유료로 제공하고 있기 때문에 프로 라이선스를 구독하지 않는다면 무료 아이콘을 써야 합니다.

하지만 무료 아이콘도 아주 많이 있으니까 별 상관이 없더라고요. ㅎㅎ

2. Font Awesome 응용하기

이러한 아이콘들을 여러 가지 방법으로 사용할 수 있습니다.

이런 아이콘들은 다음과 방법으로 활용이 가능합니다.

1) 버튼에 아이콘 넣기

<button> 태그 사이에 위와 같은 방법으로 복사된 아이콘 태그를 넣으면 버튼 안에 아이콘을 넣을 수 있습니다.

※ 버튼 모양은 부트스트랩 테마를 사용했습니다.

<button class="btn btn-lg btn-success">
	<i class="fas fa-save"></i> 저장
</button>

See the Pen FA 02 by wooncloud (@lomeiskk) on CodePen.

2) 아이콘 크기 조절하기

아이콘은 font-size로 변경할 수 있지만 그밖에 클래스 몇 가지를 더 추가하려 쉽게 바꿀 수 있는 방법이 있습니다.

<i> 태그 뒷부분에 fa-lg, fa-2x와 같은 사이즈를 정해주는 클래스를 사용하면 됩니다. 아래의 예시를 보시죠.

https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

See the Pen FA 03 by wooncloud (@lomeiskk) on CodePen.

3) 아이콘 회전

다음과 같은 클래스를 추가하면 아이콘을 회전하고 상하좌우를 반전시킬 수 있습니다.

https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

fa-rotate-90	90도 회전
fa-rotate-180	180도 회전
fa-rotate-270	270도 회전
fa-flip-horizontal	좌우 반전
fa-flip-vertical	상하 반전
fa-flip-both	좌우상하 반전

<div class="fa-4x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

See the Pen FA 04 by wooncloud (@lomeiskk) on CodePen

4) 아이콘 애니메이션

'fa-spin', 'fa-pulse'와 같은 클래스를 사용해서 로딩스피너와 같은 효과를 만들 수 있습니다.

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>
<i class="fas fa-stroopwafel fa-spin"></i>

See the Pen FA 05 by wooncloud (@lomeiskk) on CodePen.

5) 아이콘 중첩 (아이콘 스택킹)

Font Awesome에서 제공하는 클래스 중, 여러 아이콘을 중첩시켜 하나의 아이콘으로 만들 수도 있습니다.

예를 들어서 금연표시와 같은 픽토그램은 담배와 금지 표시가 중첩되어 하나의 아이콘으로 만들어진 것이죠.

아래의 예시를 사용하면 그것과 비슷한 아이콘을 만들 수 있습니다.

https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-4x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

See the Pen FA 06 by wooncloud (@lomeiskk) on CodePen.

위의 내용은 Font Awesome 사이트에 제공하는 DOCS 페이지의 내용을 그대로 사용했습니다.

위의 예시에 따른 링크도 함께 공유해드렸으니 필요에 따라 알맞게 사용하시면 되겠습니다.

위에 소개해드린 기능 이외에 더 다양한 기능들이 많으니 사이트를 보고 참고하시면 되겠습니다.

fontawesome.com/how-to-use/on-the-web/styling/sizing-icons