Font Awesome Icons without CDN in Magento2

How to ... in Magento

I recently worked on a custom module where one of the requirements was to use Font Awesome for custom forms and notifications / alerts.

Most of the people in the Magento community suggest to load Font Awesome via CDN, but this can cause ” blank squares ” and eventually slow down the front-end on slower connections.

So instead using a CDN I decided to add those libraries in Magento which will be merged with the static view files. Here is how it works.

1. Copy files

Go to Host Font Awesome Yourself and download the entire library. The zip file should contain css, js and less files as well as webfonts.

Fontawesome Less Files

Copy all less files to the following folder.

Next, copy all files from the webfonts folder to the below path.

Fontawesome Font Files

Make sure you only copy the less files ( no CSS files ).

2. Update Layout XML

Don’t load the library globally if you only need it at one place. In my case, I added those library to my custom controller only. For example:

3. Template

Once you have re-compiled your code, you should be able to use Front Awesome in your template. For example:

Font Awesome Example

Btw. the same works for the adminhtml area in ./view/adminhtml/.

3 thoughts on “Font Awesome Icons without CDN in Magento2”

  1. Hi first of all thanks for this proper tutorial. I do hope you are all safe from this pandemic.
    I 100% followed your instruction but still it’s not working.
    Can you please help me? It is sucking me….. :–(

Leave a Reply

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