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.
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:
Don’t forget to compile your sass with Calypso.