Extending glyphicon set with custom icons

9
Is it possible to extend the glyphicon set with custom icons? I want to use custom icons for my project navigation tree and change their active/hover color. I already tried to upload SVG icons into an image collection. They are embedded via the src-attribute of <img>-tags and therefore their fill- or stroke-colors are not manipulable via CSS. Well, there are js-scripts to inline SVGs into your HTML, but that’s not the way I want to use it. I don’t want to use CSS filter function (such as hue-rotate) neither, because it seems a bit hacky for me.   Another way would be to embed a custom icon font. However you can’t use them for your project navigation, because you are not able to add CSS classes to it’s items.   Has anybody an idea, how to achieve custom icons inside the project navigation?
asked
4 answers
2

You can extend your set of glyphicons by importing fontAwesome libraries in your custom SASS directory.

A little documentation about how to set this up:

https://fontawesome.com/v4.7.0/get-started/

and

https://fontawesome.com/how-to-use/on-the-web/using-with/sass

Then, after implementing the needed parts in your project directory, you can just use classess on page elements to display various icons, for instance; you can add an empty container with the following classess:

fas fa-medkit fa-lg

Which will display the following one: https://fontawesome.com/icons/medkit?style=solid

(Note that the fa-lg class isn't actually needed, it just sets the size of the icon)

 

Edit: Also, when you want to display a specific icon before a text on your navigation items, consider adding a class to the text in button and using the :before selector.

See also: https://www.w3schools.com/cssref/sel_before.asp

answered
0

When setting the icon for your menu item you can select images instead. Changing on hover is something you can’t do with default functionality, you would need to work around the default navigation.

In images you’re free to add icons or larger resolution images, effectively allowing you to add your own icons:

Hope this helps

answered
0

Hi Franz,

This is a bit of a pain atm to do, there are a lot of downfalls of using default layouts and nav items in mendix.

create your own layout and use css and the :before selector to add your icons, then use some selector-wrap to show which one is selected.

this is how we do it with wizards.

@for $i from 1 through 7 {
  .ap_wizard.active#{$i} .ap_wizardstep:nth-child(#{$i}) {
    background-color: red;
  }
}

 

answered
0

btw i’ll drop this here :D 

https://forum.mendix.com/link/ideas/1198

answered