Hey is it possible to display images next to forums instead of icons as the icons are very limited....Like a code to replace Font-awesome icons with images?
Like the image provided?
Hello Robert,
I don't agree with your point, In HTML we can replace a font icon via image in HTML actually we do it via the use of CSS. we make an image on the place of an icon.
you can follow just do change your image extension to jpg to icon and your image change into an icon and you can put it anywhere.
Hope this will help you
Thanks
I know the subject is already very old, but I found a solution that works.
Upload the desired image via the media manager and copy the URL.
enter the following CSS code in the CSS Customer Code field:
For the active icon:
#wpforo #wpforo-wrap .wpf-unread-forum .wpforo-forum-icon i, #wpforo #wpforo-wrap .wpforo-subforum .wpf-unread-forum i {
color: transparent!important;
width:30px;
height:26px;
background:url( https://www.yourdomain.club/wp-content/uploads/2019/01/youricon.png )
}
and for the inactive icon:
.wpfcl-0 {
color: transparent!important;
width:30px;
height:26px;
background:url( https://www.yourdomain.club/wp-content/uploads/2019/01/youricon.png )
}
Adjust the url, width and height to the size of your icon. the color is transparent now.
Unless I'm missing something, I'm thinking that changes ALL the icons for all forums.
I did this to change them selectively:
.wpf-unread-forum .img1 {
color: transparent!important;
width:36px;
height:36px;
background:url( https://www.yourdomain.club/wp-content/uploads/2019/01/youricon.png )
}
.img1 {
color: transparent!important;
width:36px;
height:36px;
background:url( https://www.yourdomain.club/wp-content/uploads/2019/01/youricon-BW.png )
}
And THEN, in the forum settings, for the Forum icon, replace the 'fas fa-***' with 'img1' (and img2, and so on...)
That gives your icon for just that forum the img1 class, so that the image specified by the css will be associated with it.
@scotty hi!
Within the Forum icon section I replaced the 'fas fa-***' with 'AR1' and the normal (read) icon appears. Despite the code, the unread forum icon never changes and keeps appearing as grey.
Is there anything we are doing wrong?
Thank you!
Font Awesome can be quite heavy on a website, so it's nice to have the option to replace FA icons with images. I've been meaning to spend some time using CSS to replace all FA icons in wpForo with optimized images, as I think it will make a big difference in page speed. I've managed to remove FA from my entire website except for wpForo.
Agree 100%.
Thanks Alisia, will try your code.
Really needs to be an option to use custom icons as FA is very limited especially if your site is a niche area. Great forum though, but these minor changes would make it look so much better. Just some feedback.
