Notifications
Clear all

wpForo 1.x.x [Closed] Replace Font-awesome Icons with Images?

17 Posts
15 Users
15 Reactions
12.9 K Views
Posts: 5
Topic starter
(@denzy)
Active Member
Joined: 6 years ago

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?

16 Replies
Robert
Posts: 10590
Admin
(@robert)
Support Team
Joined: 9 years ago

Hi Denzy,

I'm really sorry but it's not possible. You can change icons using other Font-Awesome Icons but you can't change it to an image HTML tag, it only works with Font-Awesome icon classes.

1 Reply
(@afflospark)
Joined: 6 years ago

Active Member
Posts: 5

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

Alisia
Posts: 1
(@alisia)
New Member
Joined: 6 years ago

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.

3 Replies
(@daver)
Joined: 6 years ago

Eminent Member
Posts: 11

I tried this and no luck. The icon area is blank.

scotty
(@scotty)
Joined: 6 years ago

Active Member
Posts: 5

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.

(@ysondra)
Joined: 5 years ago

Active Member
Posts: 4

@scotty hi!

I've been able to change the icons thanks to your code, but I cannot make it fully work when the topics is pending of reply.
 
.wpf-unread-forum .AR1A { color: transparent!important; width:40px; max-width:40px; height:40px; background:url( https://cosmere.es/wp-content/uploads/2019/09/AR1A(dot)png ) }
 
.AR1 { color: transparent!important; width:40px; max-width:40px; height:40px; background:url( https://cosmere.es/wp-content/uploads/2019/09/AR1(dot)png ) }
 

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!

 
Robert
Posts: 10590
Admin
(@robert)
Support Team
Joined: 9 years ago

Hi Alisia

Thank you very much for sharing this code.

Wendell
Posts: 244
(@wendell)
Reputable Member
Joined: 7 years ago

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.

1 Reply
StocksForum
(@stocksforum)
Joined: 6 years ago

Estimable Member
Posts: 135

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.

Page 1 / 3