Mendix How To: Add font-icons

or just fonts in general

Jason Teunissen
Nov 27 · 2 min read

So you want to add a custom font-icon to your project.
For this example we will be using Icomoon, because this is icon-font I got from the clients 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”

Than 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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade