Mendix Community
Published in

Mendix Community

How to add font-icons in Mendix

or just fonts in general

Update nov 2021
For MendixStudio9 view the new blog:

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:
@import ‘ps_font-icomoon’;”

Don’t forget to compile your sass with Calypso.

That it.

Have fun



The community-sourced publication for low-code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store