폰트어썸 - Font Awesome 아이콘 사용법

폰트어썸(fontawesome)이용하기

폰트어썸 사용법에 대해 알아봅니다. 폰트어썸을 이용하려면 cdn을 다운로드 받아야 합니다. 폰트어썸이 새롭게 업그레이드 되어서 cdn 형태도 달라졌습니다. 폰트어썸 링크방법을 알아보고 홈페이지나 html이 가능한 블로그에 적용해서 사용해 봅니다.

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

무료로도 사용할 수 있는 벡터형식 폰트아이콘 폰트어썸!
이 사이트 정말 많이 사용합니다. 물론 구글폰트 아이콘도 괜찮습니다만, 폰트어썸이 더 다양하게 많은 것 같아요.

폰트의 크기와 색깔까지 변경할 수 있고 class값을 추가해서 활용할 수있습니다.

다양한 굵기와 모양의 아이콘을 쓰려면 사용료를 지불하면 됩니다.

그러나 무료라도 거의 대부분 유용하게 쓸 수 있습니다.
아이콘 그릴 시간 없는데 svg를 내놓으라고 할때 빠르게 사용할 수 있습니다.

폰트어썸 무료 폰트 아이콘

상단 메뉴의 Icons > Free를 확인하면 무료로 쓸 수 있은 폰트아이콘들을 볼 수 있습니다.

폰트어썸 이용방법

폰트어썸을 이용하기 위해서는 CDN을 이용하는 방법과
폰트아이콘을 다운로드받아 서버에 설치하는 방법이 있습니다.

서버에 설치할 경우 서버용량을 생각해야 하고
폰트어썸이 업그레이드 되었을 경우
현재 업그레이드 되는 폰트어썸 기능은
이용하지 못하기 때문에 다시 다운로드 받아 설치해야합니다.

예전에 서버에 설치한 것과
현재 업그레이드된 폰트어썸의 아이콘모양이 변화되었더라구요.
그래도 가장 안정적인 이용방법은 서버에 넣는 것이 아닌가 싶습니다.

폰트어썸 이용을 위한 kit 생성

메인페이지에서 "Start for Free"를 클릭하면
kit를 받을 수 있는 메일을 입력하라고 나옵니다.

이메일을 입력하면 kit CDN을 받을 수 있습니다.
이메일로 가입하는 거죠.

웹에서 폰트어썸을 이용하기 위해서는
무료 폰트어썸 패키지를 다운로드 받아 링크하는 방식

그리고 다운로드 받지않고 이용할 수 있는
CDN의 kit를 링크하는 방식이 있습니다.

전에는 CDN으로 링크하는 것이 전면에 소개되어서
가입하지 않고도 CDN을 복사해서 이용할 수 있었는데,
지금은 CDN을 안내하는 페이지를 찾아볼 수 없네요.
그러나 이메일로 가입해보니 CDN 소스가 있네요.
개인 이메일을 입력하고 개인CDN 코드를 받아야 합니다.

가입하여 이메일을 입력하면 나의 CDN을 메일로 보내줍니다.

가입해서 CDN을 요청하신 후 본인 메일을 확인하세요.

🍄 여기부터는 새로운 버전 설명그림입니다.
이메일로 요청하는 것은 이메일로 폰트어썸에 가입하는 것입니다.
바로 폰트어썸에 로그인해볼게요.

무료다운로드 자리에 있던 "Your Kits"를 클릭합니다.

그러면 아래와 같은 화면이 나옵니다.
초록색 상자에 있는 숫자를 클릭하면 나의 kit 코드를 확인할 수 있습니다.

혹시 아직 아무것도 안보인다면
상단에 있는 파랑색버튼 [New Kit] 나
바로 아래에 있는 [Create a Net Kit + ]를 클릭해서 생성해주면 될거에요.

이미 하나 가지고 있는데 또 하나를 추가하려면
유료를 이용해야 합니다.

kit 스크립트를 <head>와 </head> 사이에 넣으면 됩니다.
CDN이나 kit 둘 중에 하나를 사용하세요.
충돌이 일어날 수 있다고 합니다.

<script src="https://kit.fontawesome.com/개인 폰트어썸 Kit 일련번호" crossorigin="anonymous"></script>

🌈 아래 구버전 설명

아래는 폰트어썸 CDN 코드 입니다.
이런 CDN을 이메일로 받습니다.
아래는 2018년 7월 공개 CDN 코드입니다.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

폰트어썸 5버전 cdn 코드입니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

폰트어썸 Web으로 링크하는 방법(CDN)

1) 폰트어썸 홈페이지 첫화면에 "Start for free"를 클릭합니다.

2) 링크 소스 kit를 받기 위해서 이메일을 등록합니다.

이메일을 등록하여 자동 kit를 받으면 업그레이드 되었을 경우 변경된 설정이 업데이트 될 수 있다고 하네요.

3) 인증메일이 옵니다.

클릭해서 정보를 입력하고 가입하세요.

4) 로그인 한 후 Kit를 클릭하면 웹에서 링크해서 쓸 수 있는 js 경로가 생성되어 있습니다. 이것을 <head></head>사이에 넣어줍니다.

5) 내가 이용하고자 하는 아이콘이 있다면 검색해서 해당 아이콘을 클릭하세요.

예로 "file"을 검색해서 file-video를 클릭하세요.

폰트어썸 코드 복사하기

빨간선이 그어진 <i class="far-fa-file-video"></i>를 클릭하면 클립보드에 복사됩니다.

내가 넣고 싶은 <body>내의 위치에 클립보드에 복사한 코드를 넣어주면 됩니다.

폰트어썸 다운로드받아 서버에 설치하는 방법

"Download Font Awesome Free for the Web"을 클릭해서
압축파일을 다운로드 받습니다.

서버에 넣어놓고 링크해줍니다.

압축파일의 경로 대로 아래처럼 넣어주었지만
폴더이름을 다르게해서 링크해주면 됩니다.

<head>~</head>사이에 link rel을 넣어줍니다.
서버에 폰트어썸을 넣을 넣우
서버에서 바로 송출해주기 때문에 어디보다도 빠릅니다.
그러나 단점은 폰트어썸이 업그레이드 되었을때
다시 넣어줘야 하거나 그렇지 않으면 구버전을 그대로 써야 합니다.

<link rel="stylesheet" type="text/css" href="fontawesome-free-5.15.1-web/css/fontawesome.min.css">

마찬가지로 폰트어썸 아이콘을 넣고 싶은 자리에
클립보드에 복사한 것과 같은 방법으로 코드를 복사해서
복사해서 넣어주면 됩니다.

폰트어썸은 재미있게도 스타일링을 제공하고 있습니다.
제공되는 class 값을 이용할 수 있습니다.

폰트아이콘 크기 설정

class를 이용해서 font-size를 지정해주거나
fa-la, fa-2x, fa-3x, fa-4x, fa-5x의 클래스 값을
추가해서 크기를 조절할수있습니다.

또는 본인이 클래스값을 추가해서 크기를 조정할 수 있어요.
class 값 .s20 {font-size:20px;} 을 만들고
<i class="fas fa-camera s20"> 으로 s20 class값을 넣어줘도 됩니다.

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

이것보다 더 작게 하려면 <div>로 감싸고
<div> 폰트 사이트를 적용해주면 됩니다.

폰트사이즈 클래스 값이 em으로 설정되어 있어
부모에게 폰트 사이즈를 적용해 원하는 사이즈로 만들 수 있습니다.
폰트어썸 font-size 클래스 값을 확인해보세요.

아래 폰트어썸의 사이즈 조절에 관한 페이지를 확인해볼 수 있습니다.

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

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

fa-fw를 이용해서 여백 고정시키기

fa-fw 클래스 값을 추가하면 하나 이상의 아이콘을 동일한 고정 너비로 설정합니다

<i class="fas fa-camera fa-fw"></i>

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

fa-li 클래스값을 추가하여 <ul>과 <ol>의 불릿을 다른 모양으로 변경하기

<ul>
<li><span class="fa-li"><i class="fas fa-camera"></i></span>List icons can1</li>
<li><span class="fa-li"><i class="fas fa-camera"></i></span>List icons can2</li>
<li><span class="fa-li"><i class="fas fa-camera"></i></span>List icons can3</li>
<li><span class="fa-li"><i class="fas fa-camera"></i></span>List icons can4</li>
</ul>

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

폰트어썸에 각도 적용하기

rotate값을 이용해서 아이콘 각도를 다르게 할 수 있습니다.

<i class="fas fa-snowboarding fa-rotate-90"></i>
<i class="fas fa-snowboarding fa-rotate-180"></i>

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

폰트어썸에 회전 애니메이션 적용하기

폰트 아이콘을 돌리고 돌리고~ 돌릴 수 있어요.
빙글빙글 애니메이션 재미있네요.

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

폰트어썸 아이콘을 요래요래 돌릴 수 있어요.
동영상을 gif로 변환했더니
깨끗하게 보이지 않습니다.
이해하시고 보세용~~
아래 링크에서 쉽게 찾아볼 수 있습니다.

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

폰트어썸에 머릿글문자 넣기

fa-pull-left, fa-pull-right을 이용할 수 있습니다.
fa-border는 테두리를 지정할 수 있습니다.

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>
<i class="fas fa-quote-left fa-2x fa-pull-right"></i>
<i class="fas fa-quote-left fa-2x fa-pull-left fa-border"></i>

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

폰트어썸 2개 겹쳐서 사용하기

fa-stack 클래스 값을 추가할 수 있습니다.
fa-stack-2x은 크게 보일 아이콘에 적용

fa-stack-1x은 작게 보일 아이콘에 적용하여 서로 겹치게 합니다.

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

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

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

폰트어썸 문자코드

문자코드로 넣을 수 있습니다.
링크페이지 참고하세요.

.bread a::after{
		margin-left:10px;
		content: '\f054';
		font-family:'FontAwesome';
		opacity:0.3;
	}

https://fontawesome.com/v5/cheatsheet?from=io

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

그 외에도 다양한 방법이 소개되어 있으니
확인하시고 사용하시면 되겠습니다.

폰트어썸의 응용방법은 Docs에 잘 소개되어 있습니다.

재미있는 기능들이 많이 있습니다.
이번 2022에 폰트 어썸 6.0.0 버전이 출시되었습니다.
업그레이드 버전을 쓰기 위해서는 다시 패키지를 다운로드 받아 수정해주거나
CDN으로 링크했다면 업그레이드 된 것으로 다시 링크하면 되겠습니다.
이번에 무료로 추가된 폰트어썸이 7,000개나 된다지요.
그 중에서 무료 및 오픈소스는 1,700라고 합니다.

폰트어썸 Docs

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

icomoon 폰트 아이콘 사용법

icomoon 폰트 아이콘 사용법은 폰트 어썸과 비슷합니다. iconoon의 장점은 내가 만든 svg 파일을 폰트 아이콘을 변환하여 사용할 수 있는 점입니다. 본 페이지에서는 icomoon 폰트 아이콘을 다운로드 받

amango.tistory.com

무료 아이콘 사이트 - 5개 사이트

무료 아이콘 사이트 - 5개 사이트 전에는 일러스트에서 직접 폰트를 그려서 png로 저장해서 쓰거나 svg로 저장해서 썼는데요. 지금은 그냥 무료 아이콘 사이트에서 가져옵니다. 깨지지 않는 아

amango.tistory.com

파비콘 만들기, ico 파일 생성 사이트 이용

파비콘은 웹브라우저에서 보여지는 작은 아이콘으로 책갈피역할을 합니다. 수 십개가 열려있는 브라우저 탭에서 쉽게 찾을 수 있으며 사이트의 아이덴티티 역할도 해줍니다. 포토샵에서 파비

amango.tistory.com

화상회의할 때 어떤 프로그램 쓰세요? 무료 화상회의 구글 미트😘

화상회의할 때 어떤 솔루션 이용하세요? 저는 화상회의할 때 무료로 구글 미트를 이용합니다. 따로 pc에 설치할 필요가 없고 인터넷이 된다면 어디서든지 이용할 수 있어서 편리합니다. 구글 미

amango.tistory.com

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

'웹관리' 카테고리의 다른 글

상업 무료 폰트 - 산돌 삼립호빵체 (0)	2020.11.20
상업 무료 폰트 - 빙그레 싸만코체 (0)	2020.11.19
이미지 배경 제거하기(누끼따는 사이트) (0)	2020.11.01
티스토리에 sns 공유할 수 있는 아이콘 넣기(티스토리 플러그인 이용 : 아주 쉬움) (0)	2020.10.22
구글 마이비즈니스 등록하는 방법 🎨🧶 (0)	2020.09.30

잡다지식 | 🍋에이망고🍓🍋🍉

폰트어썸 - Font Awesome 아이콘 사용법

폰트어썸(fontawesome)이용하기

폰트어썸 무료 폰트 아이콘

폰트어썸 이용방법

폰트어썸 이용을 위한 kit 생성

폰트어썸 5버전 cdn 코드입니다.

폰트어썸 Web으로 링크하는 방법(CDN)

폰트어썸 코드 복사하기

폰트어썸 다운로드받아 서버에 설치하는 방법

폰트아이콘 크기 설정

fa-fw를 이용해서 여백 고정시키기

fa-li 클래스값을 추가하여 <ul>과 <ol>의 불릿을 다른 모양으로 변경하기

폰트어썸에 각도 적용하기

폰트어썸에 회전 애니메이션 적용하기

폰트어썸에 머릿글문자 넣기

폰트어썸 2개 겹쳐서 사용하기

폰트어썸 문자코드

'웹관리' 카테고리의 다른 글

티스토리툴바

폰트어썸 - Font Awesome 아이콘 사용법

폰트어썸(fontawesome)이용하기

폰트어썸 무료 폰트 아이콘

폰트어썸 이용방법

폰트어썸 이용을 위한 kit 생성

폰트어썸 5버전 cdn 코드입니다.

폰트어썸 Web으로 링크하는 방법(CDN)

폰트어썸 코드 복사하기

폰트어썸 다운로드받아 서버에 설치하는 방법

폰트아이콘 크기 설정

fa-fw를 이용해서 여백 고정시키기

fa-li 클래스값을 추가하여 <ul>과 <ol>의 불릿을 다른 모양으로 변경하기

폰트어썸에 각도 적용하기

폰트어썸에 회전 애니메이션 적용하기

폰트어썸에 머릿글문자 넣기

폰트어썸 2개 겹쳐서 사용하기

폰트어썸 문자코드

'웹관리' 카테고리의 다른 글

'웹관리' Related Articles

티스토리툴바