custom fontIcons

[Jhallqvist]

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

[Jhallqvist · Accepted solution]

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.