How can I add more Glyphicons or Font Awesome in Navigation

0
I need to add more Glyphicons or another Font like IcoMoon and FontAwesome in Navigation. I know it is possible to add in CSS by ading the font files and then calling it in CSS but I need it in Navigation. This is for Mendix Native App and not the normal web. That’s the whole reason it has to be added in Navigation Menu only. Is there a way to do that?
asked
4 answers
0

Hi

Did you see that you can add Images on the navigation even for Native App?

answered
0

Hi Aliah,

Yes I did see that we can add images too. But the problem with images is that we cannot add an active state.

For e.g. my default image will be grey in color but on click it should be orange (active)

This cannot be achieved with an image as I can add just one image per menu item.

If glyphicons or any other font character is used then this can be manipulated with react native styling. That’s why I need to add more font icons in Mendix.

 

Again this is for Native Mendix App and not the web version so I cannot use background images, etc like how we do in normal websites.

 

answered
0

What about using SVG, would that be an option? See also https://docs.mendix.com/releasenotes/studio-pro/8.4#840

answered
0

I had an issue with this as well so I sumbitted a support ticket with Mendix. The following solution works in our project:

“If you make sure the SVG doesn't have a color hardcoded inside it, it should be able to take the same color as a glyphicon.”

Thus, if you have an SVG without a color hardcoded (which you should be able to do in a editing program), and you put it for example as an SVG in your bottom navigation, you can alter the color of the icon or the selectedIcon in the navigation.

export const navigationStyle = {

    bottomBar: {

        label: {

            color: brand.appDesignInactive,

        },

        selectedLabel: {

            color: brand.primary,

        },

        icon: {

            color: brand.appDesignInactive,

        },

        selectedIcon: {

            color: brand.primary,

        },

    },

}

 

I hope this helps for your project as well! Good luck :)

answered