How to add font-icons in Mendix

or just fonts in general

Jason Teunissen
Nov 27, 2019 · 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 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

Mendix Community

The community-sourced publication for low-code

Jason Teunissen

Written by

Mendix Community

The community-sourced publication for low-code

More From Medium

More from Mendix Community

More from Mendix Community

BFS: From Alice to Mendix

More from Mendix Community

More from Mendix Community

Riding the Nashorn in Mendix

More on Mendix from Mendix Community

More on Mendix from Mendix Community

Unittesting with Mendix

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