Font Awesome is a different type fonts with font type that you often encounter, "font awesome" shaped icon instead of text or writing in general. Since it was first present, "font awesome" hugely appreciated and liked by all of the users to be used as supplementary material to enhance the website.
With the presence of "Font Awesome", you become not require an icon in the form of images anymore, but simply by adding a little piece of code you are able to display the icons are very pretty. If you are interested in using it on your WordPress website or blog, so in this article I will show you how to use the font on the website Awesome WordPress.
What is Font Awesome?
As I mentioned above that the "Font Awesome" works on the same principle in most fonts but "font awesome" built with icons instead consists of an image. By using "font awesome" you can display the icon of various sizes that can be adjusted easily at the same time you can manipulate the icon as another font by changing colors, add animation, and more. And also you need to know that "font awesome" can work on almost all browsers.
"Font Awesome" now has fonts as much as 634 different icon that you can add anywhere on the site your WordPress website. Because "font awesome" compatible on any WordPress theme.
How to Add Font Awesome icons In Wordpress Manually
It's easy to add Font Awesome to WordPress by way of this manual. First, you need to add a line of code from Font Awesome stylesheet in the header section of your WordPress theme. Then, you need to find the real name of the icon you want to use and put with snippet of the code.
Here's How To Do It:
The first step is to add the stylesheet code of "Font Awesome" to header.php on your WordPress theme. Here is the code you should add to header.php:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />Please to go to the Appearance »Editor, and locate the file called header.php and copy and paste the above code under the <head>.
Or if you want a different way, you can add the following code to the file functions.php in WordPress themes.
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}Make sure you use a child theme, so adding the code to your theme will not be lost if one day you get a wordpress theme update.
Using Font Awesome Icons
Once you add the code stylesheet on your Wordpress theme, now you've been able to try to use the icon of "font awesome" in a place that you want on your WordPress site.
To find a complete icon list, please visit the official website Font Awesome and click the "Icon" and then find each icon you want to use, or you can type in the keyword in the search field. For example, if you want to use the icon "Download", click on the download icon.
Once you click on the icon you want, you will see the icon on display in various sizes. And also you will see a code of the icon.
To use it you must copy all of the code on any icon you want to use. Then, you can enter that code anywhere you want to show. For example if you want to use it on your posts. Paste the code on the WordPress editor, but paste it on a text editor, and then you move into the Visual Editor. And later you will see the results as shown below.
In the image above shows the icon with a small size. You can change the icon size of font awesome very easily just add a bit of code for an icon. For example, to make the icon appear twice as big, you just need to add the code "fa-2x" to the class icon. For example, see the code below:
Default Code:
<i class="fa fa-download" aria-hidden="true"></i><i class="fa fa-download fa-2x" aria-hidden="true"></i>Here's a list of codes that you can use to set the size of Font Awesome:
- fa-lg: increase the size by 33%
- fa-2x: double the size
- fa-3x: tripling the size
- fa-4x: quadrupled the size
- fa-5x: five times the size
Besides the above, with this awesome font you can also do cool things such as add animations, and much more. You can see a more complete documentation or tutorial about the code that should be added to the official website of Font Awesome.
How to Add Font Awesome Icons In Wordpress with Plugin
The second way to use the plugin is certainly a way that is easier and more practical. If you do not like the way the manual, you can use the Font Awesome with Better Font Awesome Plugin. In fact many other plugins that you can use to use the font Awesome, but the plugin that I choose this more often to get updates than any other plugin.
Once the plugin is enabled then you will see a newly added menu named Better Font Awesome. If you click on the menu, you will see some instructions on how to use the plugin and you do not need to configure anything on this plugin.
To add an icon to your post, you can use the same method with which I show in the manual way at the top, or you can use the shortcode. The advantage of using the shortcode is that you do not need to switch to the tab "Text" your editor.
Format shortcode that you need to use is:
[icon name="NAME"]You just replace "NAME" with the name of the icon that you will use. And if you want to change the size of your icons via shortcode, you just add a tag class with the exact size you want it like this:
[icon name="NAME" class="fa-2x"]All the same size selection of these examples will work with shortcode.
Above are two different ways to add Font Awesome icons to your WordPress site. I suggest to use the manual method rather than using the plugin. Because of the way the manual is very simple for you to apply rather than having to add new plugins. Hopefully this article useful, and congratulations to add an icon font awesome to your WordPress site. good luck
EmoticonEmoticon