Do you want to add icon fonts on your WordPress site? Recently one of our readers asked what’s the easiest way to add icon fonts in their WordPress theme?
Icon fonts allow you to add vector (resizable) icons without slowing down your website. They are loaded like web fonts and can be styled using CSS.
In this article, we will show you how to easily add icon fonts in your WordPress theme, step by step.
ABOUT FONT AWESOME ICONS
Font Awesome is a rich collection of 400+ icons. This library is completely free for both personal and commercial use.
In this tutorial, I am going to show you how to install and use Font Awesome icon fonts in WordPress. You can install a WordPress plugin to use icon fonts, or if you are a technical person, you can do it manually.
ADDING ICON FONTS IN WORDPRESS MANUALLY WITH CODE
FETURE OF FONT AWESOME:
1.Sizing icons
That’s right! FA allows you to size their icons without using any CSS, by creating their own classes, which you just need to add to the icon2.Icons in a list
You can easily add icons before the list elements by adding fa-ul class to your list and wrapping the icon in a span with the fa-li class3.Rotating icons
You can also rotate your icons without the use of CSS’s transform property, only adding one more class!4.Animating icons
Also by only adding a simple class, FA provides you some basic animations to add to your icons, such as spin(fa-spin) and pulse(fa-pulse)5.Stacking icons
For this, you just need to add fa-stack class to the parent element, and inside it just regularly put icons, like this6.Scaling icons
Scaling affects icon size without changing or moving the container. To scale icons up or down, use grow-# and shrink-# with any arbitrary value, including decimals. So you can change the size of an icon, without affecting the parent element.7.Positioning icons
Positioning affects icon location without changing or moving the container. To move icons up, down, left, or right, use up-#, down-#, left-#, and right-# with any arbitrary value, including decimals. You can also position the icons, without affecting the parent element. It’s almost like an absolute positioning in CSS.8.Masking icons
This feature allows you to combine 2 icons into 1, similar to stacking.9.Text over icons
You can add a text over an icon.10.Adding counter to icons
You can also add a counter to an icon. Good example is to display the number of messages received on an envelope icon.GETTING STARTED
The first step is to link to the font from your website. You can do this by adding the following line of code anywhere within the tags on your HTML page or template:
link href=”https://use.fontawesome.com/releases/v5.0.7/css/all.css” rel=”stylesheet”>
This links directly to the font on the Font Awesome site.
An alternative is to download the font files, upload them to your website and then link to those files.
You can download the files in zip format from the home page of Font Awesome:
https://fontawesome.com/
Unzip the files and upload them to a folder on your website.
You then link to them from the head section of your page or template, like this:
<head>
<!–your css files–>
<link href=”/mywebsitefolder/fontawesome/fontawesome-all.css” rel=”stylesheet”>
</head>
<body>
GETTING STYLISH
Like any font, you can use CSS to control the way your icon looks.
You can change the color and size by adding just two lines to your CSS file.
.fa-home {
color: red;
font-size: 40px;
}
And now the icon looks like this:
Conclusion :
And that’s it! Awesome, right? Whether you’re using the Font Awesome WordPress plugin or inserting the code manually, it doesn’t take more than a few steps to get your site up and running. Font Awesome is popular for a reason, and some of that comes from its ease of use. So get out there and be awesome!
Source: https://www.wpbeginner.com