Introducing Support for Glyphicons in Mendix

Advantages of Glyphicons

Glyphicons have a number of advantages over bitmap icons. They are actually characters in a special font that comes with Bootstrap, the CSS framework we use. As such, they share several properties with the label of a button:

• You can change their size and color with CSS.
• They respond to the button style by turning white on dark backgrounds automatically.
• They remain sharp at any size and resolution. Especially on a ‘Retina’ display, you can see the difference between a bitmap icon and a glyphicon.

There is another advantage in terms of performance. The icon font is already loaded by our web client and available for you to use. Bitmap icons result in extra requests to the server, but glyphicons do not. Especially on mobile, every reduction in the number of request counts.

Modeler Support

In the Business Modeler, the property ‘Image’ of buttons has been renamed to ‘Icon’ and editing this property will give you the following selector.

There are more than two hundred glyphs available, so we offer the option of filtering based on their name. And of course, you can still use the bitmap icons through the ‘image’ option.

This is all well and good for when you create a new project, but what if you already have a project with hundreds of pages full of buttons? That is where the new batch icon update comes in. You can find it in the Tools menu and it allows you to quickly change the icons of thousands of buttons. There are two ways of filtering that can be combined:

• You can filter based on the type of buttons. For example, you can quickly apply an icon to all data view ‘Save’ buttons or all grid ‘New’ buttons.
• You can filter based on the icon the button currently has. For example, replace the icon of all buttons that now have the old floppy disk save bitmap icon. Both ‘Save’ buttons and microflow buttons that have that image will be updated.

Finally, you can choose what icon to give to the filtered set of buttons. By choosing ‘none’ you can clear the icons of those buttons. Note that there is no undo available for this project-wide operation, so we recommend using version control to make sure that you can undo unwanted changes.

By default, the Modeler no longer puts icons on buttons. Many developers have told us that the first thing they do is to remove them so we decided to save them a step.

Final Words

In Mendix 5.16 we upgraded the Bootstrap framework to 3.3.2 so that you have more icons to play with. Judging from our Forum, people have already been using CSS workarounds to display glyphicons on their buttons, but now you can start using the new icons and actually see what you are doing in the Modeler. Finally, we want to thank the fine people at Glyphicons.com for making their Halflings icons freely available to Bootstrap users.