Styling forum icon

[trana]

Can you provide a recommendation for the best way to replace the forum icon used in the WP widget?

 

[Alex]

Hi @trana you can use CSS to replace the forum icon with your own font icon.

 

[trana]

I'm sorry I'm not following. Can you show me a css example to change it to another icon?

 

[Alex]

I'm sorry I'm not following. Can you show me a css example to change it to another icon?

Sure thing. It depends on your font icon set, but I'll assume you use FontAwesome icons on your WP site.

XFtoWP comes with a minimal font icon set and you can replace any icon with CSS. To replace the forum icon in the widget, right click on the icon > inspect.

You will find this is the HTML code that represents the icon:

<i class="xfwp-icon-comment"></i>

and it inherits the following CSS to render the actual icon (all of this told to me from the inspector)

[class*="xfwp-icon-"]:before {
    display: inline-block;
    font-display: swap;
    font-family: xfwp-icon;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    line-height: 1;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
}
.xfwp-icon-comment:before {
    content: '\e800';
}

To change the font icon source simply change the font family and the unicode in the the content property. The custom CSS you need to put on your site will look like this:

.xfwp-icon-comment:before {
    content: '/x999';
    font-family: 'FontAwesome';
}

You'll have to check with the font icon set you use for the precise CSS changes and unique unicode, but this should get you on your way.