폰트어썸(Font-awesome)이란?
웹 사이트를 제작하다보면 픽토그램같이 반복적인 공통 아이콘을 볼 수 있습니다. ex) 검색 돋보기 모양 등..
이런 아이콘을 쉽게 표현할 수 있게 도와주는 사이트가 바로 폰트어썸(Font-awesome)입니다.
Font-awesome version
폰트어썸은 버전에 따라 사용 방법이 다릅니다. 현재 6 베타(2021 기준) 진행 중이며
안정성을 위해 4 또는 5 버전을 사용하는 것이 좋습니다.
Font-awesome version 4 ▼
Font Awesome, the iconic font and CSS toolkit
Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des
fontawesome.com
Font-awesome version 5 ▼
https://fontawesome.com/v5.15/icons?d=gallery&p=2
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
1. Font-awesome 준비 CDN연결
폰트어썸을 사용하려면 먼저 관련 CDN 주소를 가져와야 합니다.
공식 사이트에서 받을수도 있고 CDN 제공 사이트를 이용할 수도 있습니다.
* 아래 주소에서 원하는 version을 선택하고
https://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 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make
cdnjs.com
원하는 버전 선택 후 Asset Type : All
가장 윗 줄에 보이는 all.min.css 경로를 복사합니다.
필요한 HTML 파일 <head> 태그 내에 링크 스타일 태그를 작성하고 위에서 복사한 주소를 붙여넣기 합니다.
<head>
<meta ...>
<title></title>
<link href="주소붙여넣는위치" rel="stylesheet">
</head>
2. Font-awesome 아이콘 가져오기 (ver5 기준)
https://fontawesome.com/v5.15/icons?d=gallery&p=2
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
▲ 위 주소에서 원하는 아이콘을 검색하거나 선택합니다.
아이콘에 마우스 올렸을 때 PRO 표시된 이미지는 유료이미지 입니다.
원하는 아이콘을 선택하면 다음과 같은 상세 화면이 나타납니다.
아이콘 이름 명 아래로 폰트어썸의 가져오기 종류가 나타납니다. (코드, 태그, SVG 등)
* 간단한 CSS로 아이콘을 단순히 표현하는게 목적이라면 유니코드(Unicode)를 추천합니다.
아래 f368 같이 유니코드가 나오는 부분을 클릭해서 복사하세요.
(JS로 동적기능 표현이 목적이라면 SVG를 사용합니다. SVG는 폰트어썸 5버전 이후부터 지원합니다)
<body>태그 내에 원하는 태그를 준비합니다.
<body>
<p>test</p>
</body>
CSS 작성 위치에 가상클래스선택자 ( after or before ) 를 이용하여 아래와 같이 작성합니다.
p::after {
content:'\f368'; /*유니코드 붙여넣기*/
}
추가로 연결한 폰트어썸에 따라 font-family를 연결해야 하는데
연결하려는 폰트어썸의 스타일을 확인하고 그에 따른 설정이 필요합니다.
* 대소문자 구분 없습니다.
Solid Style (fas) , Regular Style (far)
* Solid Style(fas)는 font-weight 600 이상 적용해야 사용할 수 있습니다.
p::after {
content:'\f002';
font-family:"Font Awesome 5 Free"; /*폰트어썸 fas, far 글꼴 연결*/
font-weight:600; /*폰트어썸 굵기 Solid Style(fas) 600필수*/
}
Brand Style (fab)
* Brand Style(fab)는 font-weight가 선택속성입니다.
p::after {
content:'\f368'; /*유니코드 붙여넣기*/
font-family: "Font Awesome 5 Brands";/*폰트 어썸 fab 글꼴 연결*/
}
그 외 추가 속성
color:; /*폰트 어썸 색상*/
font-size:; /*폰트 어썸 크기*/
위와 같이 진행했다면 아래와 같은 결과를 확인할 수 있습니다.
