• Welcome to the all-new Kolakube support, the official place to get help for Marketers Delight, XFtoWP, CryptoWP, and other WordPress products! Please login with your account details to access private support forums.

Styling forum icon

trana

Active member
XFtoWP
Messages
28
Reaction score
0
Can you provide a recommendation for the best way to replace the forum icon used in the WP widget?
 

Alex

MD developer
Staff member
Md
XFtoWP
Messages
6,546
Reaction score
1,847
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:

HTML:
<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)

CSS:
[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:

CSS:
.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.
 
Comment
Top