Full Glyphicons library in Mendix

Hello everybody, We've downloaded the full Glyphicons library package and managed to implement it into our Mendix project by custom CSS. This works fine when we want to use the icons in text/headers/etc, but not for buttons/navigation. When you apply the Glyphicons class to a button, it (logically) also changes the text on the button to the Glyphicons font, which as you can see is pretty ugly. Is there any way to implement the full Glyphicons library into the "Icon" option for buttons/navigation? And if not, is there any way to use these icons without influencing the text? We can't use images, because we want to be able to color the icons depending on the buttons styles in which we use them. Thanks in advance! Kind regards, Bas
3 answers

Hi Bas,

The reason your text is messing up on buttons is because you are applying the Glyphicons classes on the wrong level. Glyphicons are a font and will therefore override the font of the button.

They way to accomplish having normal text and an icon is through the selection of an icon. If you select a icon for a button in the modeler you will see that the HTML generated is different. It will look like so:

<button type="button" class="btn mx-button mx-name-actionButton11 btn-primary" id="mxui_widget_ActionButton_1" data-mendix-id="2_7" tabindex="0" widgetid="mxui_widget_ActionButton_1" style=""><span class="glyphicon glyphicon-minus"></span> Fiddle </button>

This is so that we can have 2 fonts, one for the icon and one for the text.

If you apply your own glyphicon class and override the selected one in the modeler i would suggest adding some css like so:

.btn-custom-icon .glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Regular';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
.btn-custom-icon .glyphicon:before {
    content: "\E001";


Something like that. So use the icons from the Mendix button options but override them in the css.

Does this make sense?




To fix it with just CSS, this works for me:


span.glyphicon {
    font-family: 'Arial';

span.glyphicon:before {
    font-family: 'Glyphicons Halflings';

Of course you can replace span by button :)


On a button you can work with the Class in the Properties. So on a button put the Class btn-image glyphicon glyphicon-th-list for instance. Only problem is that in the modeler itself it looks very different then on the front end.

But I would suggest submitting a feature request. Because it would be nice if Glyphicons would be supported out of the box.