How to add font-icons in Mendix 9

and also regular fonts.

Published in

Mendix Community

3 min readNov 23, 2021

Things have changed slightly from how we did things in Mendix 8 (which you can read here). There have been some really exciting developments around managing your design system. There are some nice features that need a bit of explaining, luckily I’m here to point you in the right direction.

In this blog we will be skipping a lot of “basic steps”, it is not impossible to do if you don't know the following, but it will definitely help:
- sass and mendix
- fonts in css
- how the icon font needs to be configured

Finding the correct folder

If you open up your project directory you will notice there are now 3 styling folders:

PROJECTNAME
  - theme
  - theme-cache
  - themesource

theme and theme-cache can be ignored for now.

Ui Modules

Theme source contains all the modules in your project.
One of the cool things in mx9 is that you can turn a module into a UI resource.
If you want to start your scalable design system you will probably have a module in here called “CLIENTNAME-core” and turn it into a UI resource.

This will allow you to upload this module and all of its resources to the marketplace.

Now that you have turned it into a UI resource we can start putting the fonts in the right place.

Placement

When you open the themesource directory you will see the following:

PROJECTNAME
  - themesource
  -  - CLIENTNAME-core
  -  -  - native
  -  -  - web

we are going to create an extra folder here called “public”

PROJECTNAME
  - themesource
  -  - CLIENTNAME-core
  -  -  - native
  -  -  - web
  -  -  - public

and in the public folder create 2 new folders, “resources” and “fonts”

PROJECTNAME
  - themesource
  -  - CLIENTNAME-core
  -  -  - native
  -  -  - web
  -  -  - public
  -  -  -  - fonts
  -  -  -  - resources

The public folder is really cool, anything you put here will appear in the root of your deployment folder (remember this for later).

In resources we can add a logo.svg or any other resources that your client might need.
In fonts we put your fonts.

Routing your fonts in SASS.

Once you have placed your fonts in the folder, your CSS will be able to start targeting them.

Something to note is that you need to target the font from the compiled CSS location and not from your sass location (remember that thing I told you to remember?).

If you have followed the above structure, your fonts should be in /fonts, and should be written in your COMPANY-core file so everyone can use your new font.

Here is an example of implementing font awesome. Font awesome uses a variable to configure it’s path, which results in:

@font-face {
src: url('fonts/fa-light-300.eot');
}

And that is how you add custom fonts to your design system in Mendix 9