Thanks for the quick reply. For someone that is not good at coding it would be better if this option was "built in"!!
Hi Everyone. Thought I'd share this here. 🙂
How to Replace the Forum (not Category) Font-Awesome Icons with Images
Currently, the default Font-Awesome Icon for a new installation is set at
fas fa-comments
(You can see this at
Forum Dashboard
Forums
- Categories and Forums
- select the specific forum (the one under the blue bar)
- select the "edit" or "pencil" icon.
- scroll down at the bottom, and find the
"Forum Icon" area.
this is where you will see the default "fas fa-comments".
You can select different Font Awesome Icons in the provided link there.
If you want to put Images, instead of the Font Awesome Icons, you can follow the Step By Step below.
Specific Use Case: for Forum Administrators who might need to replace the Font Awesome Icons with Images, those portals that might want to use company or department logos or Forum Images.
For example, we want to create 5 different forums:
1) Human Resources Department Forum- HR
2) Sales and Marketing Forum- SM
3) IT Department Forum - IT
4) Customer Service Forum - CS
5) Management Forum - MGT
Steps:
1) Create your digital assets / images, you can either save it as a .png file, or a .jpg file, make sure the dimensions are square, 30px by 30px (you can crop and resize them in pixels)
hr.jpg
sm.jpg
it.jpg
cs.jpg
mgt.jpg
2) Upload these 5 images to your WP Media Library (On WP Dashboard, go to Media, then "Add New').
3) Click the specific image to see the "Attachment Details"
4) At the very bottom of the menu, in the "Copy Link" box, highlight the full website location of your image and then paste this onto a Notepad file.
5) Do the same Step 4, for all the five image files. (you will use this later)
Example Image location files:
https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/hr.jpg
https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/it.jpg
https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/sm.jpg
https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/cs.jpg
https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/mgt.jpg
6) On the Forum Dashboard, Select Settings
7) Select the "Styles" tab
8) Under the Custom CSS Code, add the code below (Change the YOUR_WEBSITE and the WHATEVERPATH to your exact image locations, that you copied in your "Notepad file", I will change the font color of the file you need to change and please customize it to your own):
IMAGE FILE 1
.wpf-unread-forum .hr {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/hr.jpg )
}
.hr {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/hr.jpg )
}
IMAGE FILE 2
.wpf-unread-forum .sm {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/sm.jpg )
}
.sm {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/sm.jpg )
}
IMAGE FILE 3
.wpf-unread-forum .it {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/it.jpg )
}
.it {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/it.jpg )
}
IMAGE FILE 4
.wpf-unread-forum .cs {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/cs.jpg )
}
.cs {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/cs.jpg )
}
IMAGE FILE 5
.wpf-unread-forum .mgt {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/mgt.jpg )
}
.mgt {
color: transparent!important;
width:30px;
max-width:30px;
height:30px;
background:url( https://www. YOUR-WEBSITE.com/wp-content/WHATEVERPATH/mgt.jpg )
}
9) Scroll down at the bottom of the page and click the "Update Options" button.
10) Go to the
Forum Dashboard
Forums
- Categories and Forums
- select the specific forum (the one under the blue bar)
- select the "edit" or "pencil" icon.
- scroll down at the bottom, and find the
"Forum Icon" area.
11) In our example HR Department Forum, the hr icon or image file name is hr.jpg, which we have already uploaded to our media file. So in the Forum Icon area, in the Font-awesome Icon box, just type the image code name "hr"
12) Click the "Update" button.
13) Go to the Front End of your Forum, click Control F5 to refresh the page, and you should see your new Image Icon on your specific New HR Forum.
14) Just do the same on your other forums where you need to change the Font Awesome Icon into your own image file.
15) So for the HR Forum where we use the hr.jpg image file, in the Forum Icon area, just use the code, hr, to replace the default, "fas fa-comments".
16) So for the Sales & Marketing Forum where we use the sm.jpg image file, in the Forum Icon area, just use the code, sm, to replace the default, "fas fa-comments".
17) So for the IT Forum where we use the it.jpg image file, in the Forum Icon area, just use the code, it, to replace the default, "fas fa-comments".
18) You can use your own unique naming convention if you wish.
I used this step by step instructions to train my associates and I thought I'd share it here too, for the benefit of those who might find if helpful or useful.
I recommend wpForo and the Documentation here to a lot of people and I ask them to go click my Profile Activity here to follow along some of the answers I have shared here in this forum as well.
Disclaimer: the above steps worked for our own forum, it might not work for others. Parental guidance and a lot of patience is advised. 🙂
Here's how the completed step by step above looks like on our test forum. I hope it helps someone here, too. 🙂
Hi @Sofy ! You are welcome and my sharing of stuff here when I can is also my way of saying thanks to all of you at wpForo and GVectors for making this AWESOME Forum FREE for everyone! So aside from promoting and recommending wpForo to others, I want to also give back some of the things I've learned along the way as a New User of wpForo. (I'm not so new anymore, but I am still learning new stuff!)
The QUALITY of support you give everyone here speaks so highly of all your dedication, perseverance, patience, kindness and GRACE under pressure and sometimes to have to deal with "some arrogance or rudeness" from posters who are really just needing some guidance on how to navigate along this "out of the box" beautiful Forum plugin! And we all can ask nicely, right? (Wink wink!)
I appreciate you and keep up the great job! Thank you! God bless you and the rest of your Family and Team! 🙂
Yes, it's a shame that the designers did not foresee that .. a possibility to choose between font awesome and our images or icons
