Adding glypicons to Mendix Modeler

1
Would it be possible to purchase, for instance, the Glypicons PRO set and install it for direct use in the Mendix Modeler? If so, how would I do this? If not, are there any workarounds to use these anyway?
asked
5 answers
4

Download the font awesome zip and put the fonts folder in your theme folder.

In your theme, put this in your scss somewhere. (I created file _mx-fa.scss for this)

Note that the sizes and margings require a little experimenting to get right, also depends on your theme and fonts used.

Now you can use font awesome and it scales normally.

The supplied classes are an example, you will need to make a class for each icon used in your app and put it on your button like this:

mx-fa mx-fa-question

/* Font Awesome */

@font-face {
  font-family: 'FontAwesome';
  src: url('/fonts/fontawesome-webfont.eot?v=4.6.3');
  src: url('/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}


.btn.mx-fa {
    min-width: 41px;
    padding-top: 5px;
    padding-bottom: 5px;
    &:before {
        font-family: 'FontAwesome';
        font-size: 19px;
    }                
}

.mx-fa.mx-fa-question:before {
    content: '\f128';
}

.mx-fa.mx-fa-info:before {
    content: '\f129';
}
answered
2

It is possible to do this with styling as well. With the Glyphicon pack you also receive css files that use the content: tag to display the icons. By using the class (e.g. 'glyphicon glyphicon-plus'), the plus sign glyphicon icon is shown. By using the glyphicons as styling objects the benefit is that they are treated as fonts. So you can then also use font-size to make the icons larger or smaller.

By adding an action button to your form and providing the correct class you are able to show Glyphicon icons that can trigger microflows.

Cheers

Wouter

answered
1

There is a feature request for that in the quarterly Idear forum posting. Now there is only a not so ideal workaround that I know of. You have to extract the icon you want and upload it as an image in the images section of a module. If somebody has a different sollution please post.

Regards,

Ronald

answered
1

Thanks for the ideas! For the menu I ended up using a naming convention. Since all glyphicons start with glyphicons-[name of icon] I opted to start the menu captions with [name of icon]. I then wrote a custom js script to replace that first part by a span with the icon and calling the code from a HTMLSnippet. Works like a charm but hopefully this will be added to the mx modeler soon. It does require some hacking at the moment.

window.nb = (function(){
return {
    addCustomGlyphIconsToNavigation : function() {
        $('.navbar-inner li a').each(function(){
          var navItemText = $(this).text().trim();
          if (navItemText.charAt(0) == '\\'){
            var posSpace = navItemText.indexOf(' ');
                var iconPart = navItemText.substring(1,posSpace);
            var textPart = navItemText.substring(posSpace);
                $(this).text(textPart);
            $(this).prepend("<span class=\"glyphicons glyphicons-" + iconPart +"\"></span>");
          }
        });
    }
}}());

alt text

answered
0

You can either import icons that are png files as images or add fontawesome or icomoon to your css and call the icons as a class.

answered