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!

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

Thank you very much for sharing this information. 

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

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 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.