cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
1232
Views
0
Helpful
1
Replies

custom fontIcons

Jhallqvist
Beginner
Beginner

I love the possibilities with this framework but the last couple of night I have been stumped in how to make my custom webfonts act like the built in webfont. From what I gathered in the sourcecode the built in icons use a background version of themself to match the selected theme and hide the link from showing if the svg has any transparent parts.

When I register my custom webfont I am only allowed to register one and that one acts as the foreground icon. Since my icons (like a router) has transparent parts in it (just like built in ones) I can see the connector through the arrow symbols in the icon. Is there a way to remedy this? Maybe to be able to register a background icon as well?

Regards

Jonas

1 Accepted Solution

Accepted Solutions

Jhallqvist
Beginner
Beginner

Nwm, I have managed to solve this by duplicating the nx.grapphic.Icons class in a separate js file an modify the registerFonIcon as following:

registerFontIcon: function(name, fontfamily, fontCharacter, fontSize) {

    ICONS.icons[name] = {

        size: {

            width: fontSize,

            height: fontSize

        },

        name: name

    };

    if(Array.isArray(fontCharacter)) {

        ICONS.icons[name].font = [fontCharacter[0], fontCharacter[1]];

    }

    else {

        ICONS.icons[name].font = [fontCharacter, fontCharacter];

    }

    nx.dom.Document.addRule(".n-topology g[icontype=" + name + "] .fontIcon", "font-family: " + fontfamily + " !important;");

It seems to preserve the core functions yet allowing me to add font icons with the background just like the original icons.

Might be something to add to the core library in the future though in case one would like to use custom font icon but take advantage of the css behavior.

View solution in original post

1 Reply 1

Jhallqvist
Beginner
Beginner

Nwm, I have managed to solve this by duplicating the nx.grapphic.Icons class in a separate js file an modify the registerFonIcon as following:

registerFontIcon: function(name, fontfamily, fontCharacter, fontSize) {

    ICONS.icons[name] = {

        size: {

            width: fontSize,

            height: fontSize

        },

        name: name

    };

    if(Array.isArray(fontCharacter)) {

        ICONS.icons[name].font = [fontCharacter[0], fontCharacter[1]];

    }

    else {

        ICONS.icons[name].font = [fontCharacter, fontCharacter];

    }

    nx.dom.Document.addRule(".n-topology g[icontype=" + name + "] .fontIcon", "font-family: " + fontfamily + " !important;");

It seems to preserve the core functions yet allowing me to add font icons with the background just like the original icons.

Might be something to add to the core library in the future though in case one would like to use custom font icon but take advantage of the css behavior.

Getting Started

Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community:

Recognize Your Peers