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.
Regards,
Ronald