font-awesome local integration

What is Font Awesome anyway?

Font Awesome is ultimately a font. However, the characters do not look like letters, but are icons. CSS + LESS (Stylesheet Language) is the basic basis of the representation. This has several advantages over the corresponding use of raster image files, for example, in terms of scaling, but also in terms of performance. 

Integrate Fontawesome locally

Advantages of Font Awesome for Icons

If you use raster graphics for your icons, i.e. images like .png, .jpeg or similar, you have maximum freedom in terms of design - but at the expense of more complicated embedding, limited scaling and performance. For example, it usually requires more memory to store individual pixels than mathematical formulas that describe shapes. 

The latter is the case with Font Awesome. Because raster graphics are larger, they take longer to load than Font Awesome. If you think "Never mind, I've got vector graphics as icons", you might still be persuaded to rethink: Because unlike individual vector graphics, Font Awesome is easier to embed in the website and easier to edit, for example, colorize. 

The advantages of Font Awesome in the context of raster and vector graphics as icons can be summed up as follows:

  • Less memory requirements
  • Faster loading times
  • Easier handling

Font Awesome is used extremely frequently. You will most likely use Font Awesome in your WP theme as well. You can check this by checking if the corresponding stylesheet "all.css" is uploaded from the fontawesome server. 

You will find the corresponding command in your header file (header.php). It looks like this:

What Font Awesome has to do with the DSGVO

As you have just seen in the code, the font Awesome is uploaded from the fontawesome server. This is a server from the USA. In order for the server to send you the font, it has to process the corresponding http request - which in turn comes from the user of your website and is full of information. For example, it contains the IP of the user, which you pass on to Google. 

You remember the blog article about Deactivation of Google Fonts? The reason is exactly the same. This alone means that if you want to use Font Awesome legally, you have to integrate it locally.

Apart from the DSGVO, what speaks in favour of the local integration of Font Awesome?

Let's assume that the EU data protection basic regulation would not stop you from reloading Font Awesome. What reasons would there be not to do this and instead include a local copy of Font Awesome on your own server?

Clearly: Performance. Everything that is reloaded in any form and does not need a lot of bandwidth (e.g. high-resolution videos or images) or eats up computing capacity from the server (e.g. online tools) would save you or your users loading time if you kept it locally. After all, not only the actual request to the fontawesome server costs time, but also the TLS handshake. 

You are also relying on an external source outside your control. It may fail or suddenly provide a different font. Yes, there is caching and so on, but even that only improves the loading time a little. In this sense, the local integration of Font Awesome only brings advantages - right?

Actually, there are disadvantages too! For example, with your own copy of Font Awesome, you may not always have the latest version "in stock". Less tech-savvy users can also do a little more wrong with the installation/embedding than simply reloading it with a single command in the header file. 

The latter will probably be the biggest disadvantage, given the rather static properties of a font. To eliminate this, we will show you in detail right now, how to integrate Font Awesome locally!

How to integrate Font Awesome locally

The bottom line is that for local integration we have to make sure that our or your web server can deliver the font Awesome. We divide this process into three steps and say right away that unfortunately we have not found a plugin and therefore it couldn't be easier:

  1. Download Font Awesome data from the official website!
  2. Upload data to the server
  3. Embed files accordingly in your WordPress!

Download Font Awesome

The first step is made very easy for us by Font Awesome. Visit the site https://www.fontawesome.com and click on "Docs for Web" in the top left menu, then on "Hosting Font Awesome Yourself". We have already linked this download page under the address just for you. 

Download the .zip file and unzip it. For the following step number 2 we only need the unzipped "webfonts" folder and the CSS folder - especially the "all.css" file.

You need the 2 following folders:
- webfonts
- CSS

These two folders are uploaded to your server via FTP.

fontawesome-donwload


How and where you store the files on your server

The second step is a bit more complicated because you will now put the "webfonts" folder and the "all.css" file on your web server. You will need access to them first. This can be done using the File Transfer Protocol (FTP) or a tool like FileZilla. Advanced users will probably prefer to use SSH for security reasons. We stick to FTP and use FileZilla, which means we have to log in to our webserver first. 

For this you need your access data, which you can get from your hoster. Now you can click through the folders and files on your webserver with FileZilla, similar to Windows Explorer.

In the folder of your WP-installation it is now up to you where the "font Awesome" data will be uploaded to 100%. Sometimes in some guides "fixed paths" are specified as "necessary" - but that is nonsense. In the end we need a folder where we put the font Awesome data and that's it.

My suggestion here: 

Creates a new folder in the subfolder /wp-content/ an - Name: "fontawesome"

Visually, the whole thing would look like this:

ftp path


In this new folder fontawesome we now have to upload the necessary data from fontawesome - the folders "CSS" and "Webfonts

fonts2


In the end the whole thing should look like this with you:


webfonts-final
 The CSS folder and the webfonts folder have been uploaded

Embedding the local font in your theme

So, now it's getting exciting again. We now have the fontawesome data on our webspace and have to tell our WordPress site to use this data.

This step is practically the same as the one line of code you may have used to reload Font Awesome before.

But instead of pointing to the fontawesome server, put your own path into the "header.php" file - provided you see it in your active WordPress installation.

Depending on the theme, there are different ways to implement this point.

The basic objective is to in your theme in the header of the following code:

 

You have the following options here:

1. include the line of code in your header.php - this requires Using a Child Theme and that you have copied the header.php from the main folder of your theme (parent theme) to your child theme folder. The line of code you then simply insert somewhere after the opening and the closing .


code-header-php
Exemplary installation in a header.php

For this you can use a text editor in combination with FileZilla or directly the editor function in WordPress.

Important! If you make the changes directly in the WordPress Editor, you should really be sure what you are doing and have FTP access in case of emergency.


View in the WordPress Editor

In many themes there is the possibility to add code to the header.php via the theme settings. Corresponding options for known themes I will add separately in this article!

It is done! You have most likely successfully integrated Font Awesome into your theme based on a local copy. Let's check it out right now: Visit the https://fontawesome.com/icons and look there for an icon that you want to use. By clicking on the appropriate icon you will get to the bottom of the page, where the source code necessary for WordPress is displayed. 

Now copy this into your post and see if it works or if the icon is displayed! By the way, make sure that you use the text editor for pasting and not the visual editor.

The code, for those readers who do not yet know it at this point, looks like this

Good to know
fontawesome can be modified via CSS. The pure size can also be easily defined by an addition directly in the font awesome code. In our example the code looks like this:

How do I add Font Awesome to the big known themes?

Basically the way via the header.php is an option for every theme. 

Well known themes like the Astra, the Divi or even the Avada (to name a few examples) often have their own possibilities to integrate code into special areas like the header. I would like to explain these options for the 3 themes Astra, Divi and Avada in the following.

Integrate Awesome font into the Divi theme

The Divi theme does not have a direct integration of font Awesome by default. To use font Awesome you could use the already described way by modifying the header.php - but it makes more sense and is easier to use the function directly in the Divi Theme.

To do this, go to DIVI > Theme Options and click on the Integration tab


Here we now insert our code accordingly. In our case for the local hosting of Font Awesome this would be again:

 

your-path-to-fontawesome is of course again equivalent to your path where you have stored the font awesome data.

Font Awesome restricts you? Make your own font!

The disadvantage of Font Awesome, on the other hand, is the limitation in design. The font has many icons, but not all of them and certainly not individual ones. With some knowledge in font design, however, you could adapt the font to your own needs or create your own font for icons. 

At the latest now, there is practically no longer any noteworthy advantage, apart from multicolour or SVG effect icons, that speaks for the use of single vector graphics or even pixel images for icons.

Tools for your own icon font

By the way: It is not that difficult to create your own font. You can find many more or less great tools for this purpose on the web, including offline programs like BirdFont (high learning threshold) or the generally less complex but easier to learn online services like FontArk, Prototypo, Calligraphr and many more. 

Ideally, you should first deal with a few technical terms and basic rules for designing your own font, even if these are only of minor importance for icons and you are quite free in the design.

In summary, you will benefit from your individual "Font Awesome" or your own icon font whenever you need simple icons with one color and without mixed effects like glow or transparency. 

This doesn't work because access is only possible on character level and not within it, as would be the case with a .svg.

About Christian

ChristianMy name is Christian and I am co-founder of the platform fastWP. Here in the magazine I am responsible for the more "technical" topics but I like to write about SEO, which has been my passion for over 10 years now.

8 thoughts on “Font Awesome lokal einbinden”

  1. Avatar

    Thanks for the great instructions. I myself use the Astra Theme, but based on your article I was able to implement the installation well.

    1. Christian

      Thanks Danny, yes for different themes, among them the Astra I wanted to explain the implementation separately. With the Astra, for example, using the "Hook" plugin is a good thing to integrate the path to fontawesome in the header.

  2. Avatar

    Thank you very much, everything worked out wonderfully. Unfortunately, the icons are all very small now but I'm sure I'll get that solved. Thanks for the good instructions.

  3. Avatar

    Hello,

    Thanks for the instructions. I just can't seem to get the code to fit in the Astra theme. Could you say "stupid" again? Would it work with the insert headers and footers plugin I used to integrate the Google analytics code?
    Many thanks and best regards,
    Mira

    1. Christian

      For the Astra it would be an option to install the plugin Astra Hooks. With this you can also add code to the header.

      1. Avatar

        Hi Christian, I'm still struggling, even with the hook plugin it doesn't work. The code I use is :
        Then when I try to put a font awesome code on a page, you don't see da icon.
        In the header&footer plugin I get the message: "special characters must be escaped". What am I doing wrong?
        best regards,
        Mira

Leave a Comment

Your email address will not be published. Required fields are marked *

en_GB