XF 2.2 Custom icon

[stromb0li]

This is a really generic question, but is there an easy way to be able to leverage all the work xenforo has done for font-awesome icons, but instead point to a one-off SVG icon? I use xenforo syntax (<xf:fa/>) in quite a few plugins, but I have just one icon that isn't part of the font-awesome portfolio. Is there any way to take advantage of as much styling xenforo has out of the box so the SVG icon scaled / positioned similarly to font-awesome references in xenforo?

Thank you!

 

[Jeremy P]

In 2.2, the icons use web fonts. Styling/positioning SVG icons requires a different approach so there isn't likely to be much overlap.

 

[stromb0li]

If I convert the SVG to woff, do I have any options?

 

[Jeremy P]

Maybe, but it’s likely easier to just include the SVG directly and style it how you want.

 

[stromb0li]

Maybe, but it’s likely easier to just include the SVG directly and style it how you want.

 

[Jeremy P]

You'd wind up having to set certain CSS properties manually anyway so it wouldn't really make life any easier. You can embed the SVG and create a CSS class with a handful of styling/positioning rules to re-use wherever you want.

 

[stromb0li]

I'm trying to set an icon in navigation entries, but I can't seem to get the svg to handle the size.

.p-navEl a[data-nav-id='my_menu_item']:before, .menu-content a[data-nav-id='my_menu_item']:before {
    content: url(/data/assets/style_properties/my-not-awesome-icon.svg);
    display: inline-block;
    text-align: center;
    width: 1.28571429em;
}

Edit: Issue was caused by the SVG containing height, width, and viewbox. Removed those and the image scales fine now. Doesn't look as nice as the other icons though, nor seems to support proper color attribute

 

[Jeremy P]

Oh, I thought you were trying to use it in markup since you mentioned <xf:fa>. If you need it in a psuedo-element you can use CSS masks. You shouldn't need to change or remove the viewbox.

.some-el::before
{
    display: inline-block;
    content: "";
    background-color: currentColor;

    // you might need to play with these
    height: 1em;
    width: 1em;
    vertical-align: -0.125em;

    mask-image: url('/my/special/icon.svg');
    -webkit-mask-image: url('/my/special/icon.svg');
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

 

[stromb0li]

My bad -- yeah, I was looking to use <xf:fa> but then your one in the million talk wandered me down the other path.