What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Use Font Awesome in WordPress

How to Use Font Awesome in WordPress

Due to the great competition among the countless number of websites nowadays, you need to try your best to make your whole site appealing and attractive. Here, the custom and proper font icons can spice up your menus, posts and pages, making them eye-catching enough. As the Font Awesome is the big name for the font icons, in the following, we’d like to tell you how to use Font Awesome in WordPress.

To put it simply, the Font Awesome is the special toolkit that collects a lot of special icons based on LESS and CSS. At present, this famous toolkit has more than 20% market share among websites that use the font scripts. In addition, its supported font icons are all customizable and cross-browser compatible.

If you have some interests on Font Awesome, you can check the following parts to learn how to use it on your WordPress site.

Use Font Awesome in WordPress Manually

If you are looking to use the Font Awesome in WordPress manually, you should finish two main steps. These include adding the Font Awesome stylesheet in the header section of your WordPress theme and displaying your target icons using the corresponding code snippet.

Include the Font Awesome Stylesheet to Your Theme Header

Here, you need to enter the Font Awesome CDN page to get a single line of coding stuff. From this page, you should enter the email address that you use for your WordPress site, and then, click the Send My Font Awesome Embed Code button.

Send My Font Awesome Embed Code

After that, you can click the Download button to get the default styling for the icons. Upon the downloading, you need to copy the entire directory of font-awesome into your site. Here, you should open and edit your theme’s header.php file, and then, insert the line of code you’ve got from your email into the head section.

After saving your file, now, you have already added the Font Awesome support to your WordPress site.

Insert the Font Awesome Icons to the Proper Location

As you have already finished the preparation, now, you can start using the icons offered by Font Awesome at wherever you want.

Here, you should go to the icon listing page of Font Awesome to search for your wanted options. Note that you can find a powerful search box, with which you can enter the keywords to find your targets easily.

Font Awesome Icons List

Now, you can click your wanted font icon. From the next page, you can preview it and get the line of code you should copy to your website.

Font Icon Code

For instance, you can directly add the icon code when you are editing your post in the editing screen.

Font Awesome Icons Sample

Customize the Font Icons with the Bigger Sizes

It is possible that the default size is too small to meet your needs. If so, you can make your icons bigger with a tiny bit of extra code. For instance, if you want to increase the size by around 33%, you can add the “fa-2x” next to the icon class. Note that if you want to double or triple the size, you should use the “fa-2x” or the “fa-3x” code.

In addition, you can refer to this example page to learn how to set your icons at the fixed width, how to pull the article or the quotes icons and how to add the display animation.

Use Font Awesome in WordPress with the Plugin

The manual method gives you much freedom to decide how your font icons can be added and displayed. However, if you do not want to bother too much coding stuff, you can choose to use the WordPress plugin. Here, we think you can consider the utilization of the Better Font Awesome plugin.

This plugin allows you to integrate the Font Awesome icons into your WordPress site. Note that it will fetch the recent available versions all the times, so you do not need to update the version manually.

Set Up the Better Font Awesome Plugin

To use this plugin, you firstly need to click the Settings > Better Font Awesome button after the proper installation. Here. You can choose to use the Font Awesome version from the options of 1.0.0 to 4.7.0. Also, you can choose to always use the latest version.

In addition, you should determine whether to include the minified version of CSS or just use the unminified version. Also, if you already have the Font Awesome CSS or the related shortcode added on your WordPress site, you can remove them. In most cases, the existing Font Awesome icons might be added by some other templates or plugins.

Better Font Awesome Settings

Add the Font Icons

Now, you can start adding the font icons with the simple shortcode. Note that the shortcode format just looks as the following.

Font Icons Shortcode Format

In addition, you can change to the visual editor when editing your post content. Here, you can find the newly added Insert Icon button. After hitting on it and finding your target options from the list, you can click it to have the code generated automatically.

Insert Icon Button

Note that the code will have the blank space for some additional classes you are looking to add. For instance, you can enlarge the icon, spin the icon, spin the border and many more. The typical code customization can be found from the plugin settings page.

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *