Magento 2 Training : Unit 6 – Bonus

Add custom font with Magento 2

To set our new SVG icon, you can create it yourself, or find one on the web.

You can use Icomoon website to chose or import your icon.
In this example, I will download one :


Select one or many icons, and click on “Generate Font” at the bottom of the page.

You will have a display like this :


Remember the code e900 below the icon, it will be useful on our CSS code.

Extract the archive and go inside the “fonts” folder.
I decided to rename the 4 files with “jobs” instead of “icomoon” (Don’t remove the extensions !)

You can create a font with a lot of icons, it not very useful to have one font with only one icon !

Take the 4 files inside the folder and paste its into :

You can use another folder name of course 😉

Font display in the admin menu

Our font is ready, so we will display it on the admin menu.

Create the file :

And put this code inside :

@maximejobs-icons-admin__font-name-path: '@{baseDir}fonts/MaximeFonts/jobs';
@maximejobs-icons-admin__font-name : 'MaximeJobs';
    @font-path: @maximejobs-icons-admin__font-name-path,
    @font-weight: normal,
    @font-style: normal
.admin__menu .item-job-head.parent.level-0 > a:before {
    font-family: @maximejobs-icons-admin__font-name;
    content: "\e900";

The “content” attribute contains the code I told you to remember 😉
The class “item-job-head” contains the word “item-“, following by what we defined on our menu.xml : Maxime_Jobs::job_head

Delete these folders :

Refresh the admin page (it can be a little bit long because Magento generate static files)
And you will see the new beautiful icon !


Get ready for the next article, which is a new practical !

Continue training
Return to previous lesson
Bonus : Add custom module icon on Magento admin
Tagged on:             

2 thoughts on “Bonus : Add custom module icon on Magento admin

  • 03/26/2016 at 21:18

    I am getting the error while deploying the static-content:

    “Compilation from source:
    in _module.less on line 3, column 15

    Any idea what can be the reason?


    • 05/27/2016 at 11:53

      Check if you dont have any syntax errors in your _module.less file.


Leave a Reply

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

We use cookies to ensure that we give you the best experience on our website.