Install Manually

This documentation describes customizing WordPress by adding PHP code to your theme’s functions.php file. It’s intended to be used by more advanced WordPress users who know why using our plugin isn’t the best solution for their situation.

Advertisement Remove ads with a Pro plan! Using this requires Font Awesome Pro Pro A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com. And of course Pro-level plans come with… All 7,864 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans Get Font Awesome Pro for only $99/yr Already have a Pro Plan? Sign in

If you’re just trying to setup Font Awesome in WordPress the simplest way, with all the magic already built-in, then use our WordPress plugin instead.

Before You Get Started In order to make use of these code snippets, you need to be able to check off all of these boxes: I have write access to my WordPress theme’s functions.php file.

file. I know how to make changes to my theme’s functions.php file.

file. I feel good about making some simple code changes to dial it in.

CDN vs. Kit

These examples and code snippets offer two different approaches to setting up Font Awesome in WordPress: with kits and without kits. The “without kits” approach is referred to as “CDN” in these examples mainly for legacy reasons. Namely, before we had kits, the options were either to host the icon assets yourself (self-hosting), or load them from our Free or Pro CDN. Then we added kits, which are also backed by a CDN.

So don’t think that the kits approach in these examples is sans-CDN. Kits are backed by a fast and stable CDN.

In fact, kits are usually the best approach you can take for both performance and flexibility, especially Pro kits, especially especially SVG Pro kits. Once you’ve set up a kit with one of these code snippets, you’ll be able to configure and re-configure that kit right from your Font Awesome kit settings and not have to touch the PHP code again.

The “CDN” alternatives are offered because, sometimes, there are use cases where loading the Font Awesome assets directly from the CDN is preferable to loading a kit. But if you aren’t sure that you have such a use case on your hands, then that’s a pretty good clue that setting up a kit is your best bet.

Set up for a Kit

First we’ll lay a foundation with this function that you’ll call with your Kit code. If you’re not a coder, don’t worry. You’ll probably never need to modify the code in this function. You’ll only tweak the simpler code below to add your Kit token. Here we go. Copy and paste this into your functions.php :

if ( ! function_exists ( ‘fa_custom_setup_kit’ ) ) { function fa_custom_setup_kit ( $kit_url = ” ) { foreach ( [ ‘wp_enqueue_scripts’ , ‘admin_enqueue_scripts’ , ‘login_enqueue_scripts’ ] as $action ) { add_action ( $action , function ( ) use ( $kit_url ) { wp_enqueue_script ( ‘font-awesome-kit’ , $kit_url , [ ] , null ) ; } ) ; } } }

Next, you’ll need to add the following code, also to your functions.php, replacing the 42deadbeef.js with your real Kit token, which you can find in your Kit settings.

fa_custom_setup_kit ( ‘https://kit.fontawesome.com/42deadbeef.js’ ) ;

Advertisement Remove ads with a Pro plan! Using this requires Font Awesome Pro Pro A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com. And of course Pro-level plans come with… All 7,864 Icons in Font Awesome

Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands

A Perpetual License to Use Pro

Services and Tools to Make Easy Work of Using Icons

Fresh Icons, Features, and Software Updates

Plus Support From Real Humans Get Font Awesome Pro for only $99/yr Already have a Pro Plan? Sign in

Set up SVG with CDN

First we’ll lay a foundation with this function that you’ll call one or more times to set up the bits and pieces of Font Awesome that you choose.

If you’re not a coder, don’t worry. Any code changes you’ll need to make will be limited to the less complex parts below. You’ll probably never need to modify the code in this function. Instead, you’ll achieve your customization by calling this function one or more times with various arguments.

So it’s a big chunk of copy-and-paste, but the hand-coding requirements will be super-minimal. Just wait, you’ll see.

OK, now copy this chunk and paste it into your functions.php :

if ( ! function_exists ( ‘fa_custom_setup_cdn_svg’ ) ) { function fa_custom_setup_cdn_svg ( $cdn_url = ” , $integrity = null ) { $matches = [ ] ; $match_result = preg_match ( ‘|/([^/]+?)\.js$|’ , $cdn_url , $matches ) ; $resource_handle_uniqueness = ( $match_result === 1 ) ? $matches [ 1 ] : md5 ( $cdn_url ) ; $resource_handle = “font-awesome-cdn-svg- $resource_handle_uniqueness ” ; foreach ( [ ‘wp_enqueue_scripts’ , ‘admin_enqueue_scripts’ , ‘login_enqueue_scripts’ ] as $action ) { add_action ( $action , function ( ) use ( $cdn_url , $resource_handle ) { wp_enqueue_script ( $resource_handle , $cdn_url , [ ] , null ) ; } ) ; } if ( $integrity ) { add_filter ( ‘script_loader_tag’ , function ( $html , $handle ) use ( $resource_handle , $integrity ) { if ( in_array ( $handle , [ $resource_handle ] , true ) ) { return preg_replace ( ‘/^

<아래 구버전 설명>

아래는 폰트어썸 CDN 코드 입니다.

이런 CDN을 이메일로 받습니다.

아래는 2018년 7월 공개 CDN 코드입니다.

폰트어썸 cdn

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

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

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

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

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

3) 인증메일이 옵니다.

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

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

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

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

폰트어썸 무료아이콘

폰트어썸 코드 복사하기

빨간선이 그어진 를 클릭하면 클립보드에 복사됩니다.

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

폰트어썸 복사하기(신버전) 폰트어썸 복사하기(구버전)

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

폰트어썸 웹용 폰트어썸 다운로드

"Download Font Awesome Free for the Web"을 클릭해서

압축파일을 다운로드 받습니다.

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

압축파일의 경로 대로 아래처럼 넣어주었지만

폴더이름을 다르게해서 링크해주면 됩니다.

~사이에 link rel을 넣어줍니다.

서버에 폰트어썸을 넣을 넣우

서버에서 바로 송출해주기 때문에 어디보다도 빠릅니다.

그러나 단점은 폰트어썸이 업그레이드 되었을때

다시 넣어줘야 하거나 그렇지 않으면 구버전을 그대로 써야 합니다.

마찬가지로 폰트어썸 아이콘을 넣고 싶은 자리에

클립보드에 복사한 것과 같은 방법으로 코드를 복사해서

복사해서 넣어주면 됩니다.

폰트어썸은 재미있게도 스타일링을 제공하고 있습니다.

제공되는 class 값을 이용할 수 있습니다.

폰트아이콘크기 설정하기

class를 이용해서 font-size를 지정해주거나

fa-la, fa-2x, fa-3x, fa-4x, fa-5x의 클래스 값을

추가해서 크기를 조절할수있습니다.

또는 본인이 클래스값을 추가해서 크기를 조정할 수 있어요.

class 값 .s20 {font-size:20px;} 을 만들고

으로 s20 class값을 넣어줘도 됩니다.

이것보다 더 작게 하려면

로 감싸고

폰트 사이트를 적용해주면 됩니다.

폰트사이즈 클래스 값이 em으로 설정되어 있어

부모에게 폰트 사이즈를 적용해 원하는 사이즈로 만들 수 있습니다.

폰트어썸 font-size 클래스 값을 확인해보세요.

폰트어썸 폰트크기

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

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

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

fa-fw 클래스 값을 추가하면

하나 이상의 아이콘을 동일한

고정 너비로 ​​설정합니다

폰트어썸

fa-li 클래스값을 추가하여

과
의 불릿을 다른 모양으로 변경하기
• List icons can1
• List icons can2
• List icons can3
• List icons can4

폰트어썸에 각도 적용하기

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

폰트어썸 각도

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

폰트 아이콘을 돌리고 돌리고~ 돌릴 수 있어요.

빙글빙글 애니메이션 재미있네요.

폰트어썸 아이콘을 요래요래 돌릴 수 있어요.

동영상을 gif로 변환했더니

깨끗하게 보이지 않습니다.

이해하시고 보세용~~

아래 링크에서 쉽게 찾아볼 수 있습니다.

폰트어썸 애니메이션 폰트어썸 애니메이션

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

fa-pull-left, fa-pull-right을 이용할 수 있습니다.

fa-border는 테두리를 지정할 수 있습니다.

폰트어쎰 머릿글넣기

폰트어썸 2개 겹쳐 적용하기

fa-stack 클래스 값을 추가할 수 있습니다.

fa-stack-2x은 크게 보일 아이콘에 적용

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

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

폰트어썸 문자코드

문자코드로 넣을 수 있습니다.

링크페이지 참고하세요.

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

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

그 외에도 다양한 방법이 소개되어 있으니

확인하시고 사용하시면 되겠습니다.

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

재미있는 기능들이 많이 있습니다.

이번 2022에 폰트 어썸 6.0.0 버전이 출시되었습니다.

업그레이드 버전을 쓰기 위해서는 다시 패키지를 다운로드 받아 수정해주거나

CDN으로 링크했다면 업그레이드 된 것으로 다시 링크하면 되겠습니다.

이번에 무료로 추가된 폰트어썸이 7,000개나 된다지요.

그 중에서 무료 및 오픈소스는 1,700라고 합니다.

폰트어썸 Docs

협업하기 좋은 마인드맵

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

반응형