How to easily add WordPress icon fonts in your theme

There are several ways to liven up a text in WordPress with icon fonts. You can use a WordPress plugin for icon fonts, which is available from Font Awesome, for example. The plugin also allows you to use short­codes to insert the icons. Al­ter­na­tive­ly, you can embed the icon fonts manually via embed code - single fonts or whole sets (also from Font Awesome). If you need only a few standard icons, you can also use the ones from Page Builders or Dashicons.

Icon Fonts are in­di­vid­ual pic­tograms and symbols that you can insert on your website for nav­i­ga­tion­al purposes or to break up the text. The big dif­fer­ence from other icons on WordPress is that Icon Fonts are laid out like an ordinary font. Instead of letters, numbers, or special char­ac­ters, they simply contain small symbols.

The ad­van­tages of this method are great. On the one hand, it fa­cil­i­tates use if the pic­tograms are deposited as a font. On the other hand, these WordPress icons are freely scalable, just like a con­ven­tion­al font, and can be colored as desired. In addition, icon fonts load faster than in­di­vid­ual graphics.

There are numerous providers that provide icons for WordPress. Many of them are free. Probably the world’s most popular site for free icon fonts is Font Awesome. Well over 7,500 icons can be found there. The palette ranges from arrows or common icons like the shopping cart and mag­ni­fy­ing glass to specific, niche icons.

Once you have found the right icons for your WordPress site, there are several ways to insert them. One simple method is to integrate them via a plugin. For Font Awesome, for example, there is a custom in­te­gra­tion plugin called Better Font Awesome. With this, you can add icons to WordPress via the use of a shortcode. The plugin always provides the latest icon sets for this purpose and thus does not require manual updates. The usage is simple: once installed, the plugin allows you to select and include any icons via the shortcode icon name="example". However, the different pic­tograms are also available for selection in the text editor.

You can also add icons to WordPress manually. Font Awesome provides you with the cor­re­spond­ing font as embed code for this purpose. This works as follows:

1. Enter your email address at Font Awesome. The embed code will be sent to this email address.
2. Then create a backup of your website. Since you are in­ter­fer­ing with the code, it is important that you have a backup.
3. Now add the code to the header of your theme. This works either through the header.php file or even directly in the backend for some themes. The embed code is inserted right before .
4. Now you can select those icons for WordPress that you need for your site.

Al­ter­na­tive­ly, download the desired icon col­lec­tion directly from Font Awesome:

1. In the first step, unzip the included ZIP file. In it you will also find a file called all.css.
2. Use FTP to connect to the server of your site. There you will find a folder called “fonts”.
3. In this folder create a subfolder called “Font Awesome” and inside it create another subfolder called “css”. There you add the file all.css.
4. Open the header.php file of your theme and add the following code before :

The range of dashicons is also set out clearly. These are standard icons with WordPress and can be inserted with a plugin. For this, you simply copy the code of an icon on the website and paste it in the backend. Com­par­a­tive­ly fewer icons are available for your WordPress site, but classics such as email icons, the logos of the various social media platforms and the shopping cart can be found here.

So, if you want to add icons to WordPress, you have several options, all of which work com­par­a­tive­ly easily. Icon fonts offer numerous ad­van­tages over graphics, which is why they can be a worth­while option. The important thing is that you always use icons sparingly. Otherwise, your site will quickly become cluttered. One WordPress favicon and a few icons on in­di­vid­ual pages is more than enough.