How to add font-icons in Mendix

or just fonts in general

Update nov 2021
For MendixStudio9 view the new blog: https://medium.com/mendix/how-to-add-font-icons-in-mendix-9-9307c2634392

So you want to add a custom font-icon to your project.
For this example, we will be using Icomoon, because this is an icon-font I got from the client's branding team.

Intro

To add a font to a Mendix project you need to do 2 main steps:

• Place the font files in the right directory.
• Add the CSS to your custom.scss

Placing the fonts

Typically while styling Mendix you will be working in the sass folder, but when placing your font files, they need to places in the CSS folder: Yourproject\theme\styles\web\css\fonts

Adding the CSS

There are different methods of adding the font CSS to custom.scss depending on how your project is structured.

I find the easiest way is to rename the font CSS to something that matches your project. For my current project that is “_ps__font-icomoon.scss”

Then using the import function in sass, add the line:
“@import ‘ps_font-icomoon’;”

Don’t forget to compile your sass with Calypso.

That it.

Have fun