Helping you drive digital innovation
Subscribe
RSS Feed of the Mendix Blog
Thanks for Subscribing

Keep an eye out for Mendix resources coming straight to your inbox.

Introducing Support for Glyphicons in Mendix

on June 3, 2015

Share:

We just released Mendix 5.16 and you can find the long list of improvements in the release notes. Today I want to highlight one of the new features: glyphicons. These icons are the modern take on images on buttons.

Glyphicons 1

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.

Glyphicons 2

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.

Glyphicons 3

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.

 

Subscribe to Our Blog

Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.

RSS Feed of the Mendix Blog
Arjan van IJzendoorn

About Arjan van IJzendoorn

Arjan is a member of the Mendix R&D department. He started developing the Mendix Modeler a long time ago and is still working on that application most of the time. Currently, he focuses on the modeling side of pages and widgets, with the occasional excursion into the rest of the Modeler.

| Community Profile
  • Great addition, and the batch updater makes it even easier for existing projects!

  • Pim van der Noll

    nice feature this release!

  • hgeldenhuys

    Pretty neat!

  • Robbie Francis

    Can someone tell me how to place the Glyphicon Pro Pack into my Mendix Project – Surely this is the most important piece of information to help Glyphicon sell more?

  • Did you figure out how to do this Robbie?

  • Robbie Francis

    Nope 🙁

  • eheddema

    Do you mean replace the icons in the Mendix modeler? That’s currently not possible, but you can however load in every icon set you want through index.html or CSS file, just as you would do with a normal custom font.

    http://stackoverflow.com/questions/19608873/how-to-include-glyphicons-in-bootstrap-3

    Just an example how to load in icons, we also use fontawesome.io, streamline icons or iconmoon.io a lot of our projects. The only downside is that you need to use classes in your model and you are not able to preview the icons in the Mendix modeler.