Quote from Asgaros on May 7, 2018, 8:43 pm

Hello @strawmr

At least the css-code with the link is working fine, but a few styling-rules are missing because the graphic is too big. You can try the following and modify it:

#af-wrapper div[id="forum-5"] .forum-dashicon:before {
    content: "";
    background: url(http://icons.iconarchive.com/icons/icons-land/metro-raster-sport/256/American-Football-Ball-icon.png);
    color: black;
    background-size: 20px 20px;
    background-repeat: no-repeat;
}

 

Quote from mattnyy on September 2, 2018, 10:51 pm

This code works great for the image change, but is there a way to not loose the functionality of new topic. Is there a way to code a image for read & un-read?

Quote from Asgaros on September 3, 2018, 8:54 am

Hello @mattnyy

Yes, this is possible. In this case you have to create two versions of the icons – one for read and one for unread state.

For the css-selectors you have to use this two ones:

#af-wrapper div[id="forum-5"] .read:before {
    /* For read state. */
}

#af-wrapper div[id="forum-5"] .unread:before {
    /* For unread state. */
}

 

Quote from ray on April 17, 2019, 3:42 am

Hi @asgaros

I use these techniques to place icons that I want next to my forums.

However the implementation of fontawseome in v 1.41 has broken this css code.

What do I need to change in my code so that my icons work again.

I imagine it is the line #af-wrapper div[id=”forum-1″] .forum-dashicon:before but I can’t work it out.

 

Fontawesome implementation is a great feature but I still find the icons don’t match my needs very well. Hence I need to use these type of replacement code using other icons.

thanks

Quote from Asgaros on April 17, 2019, 8:18 am

Hello @ray

Sorry for the trouble that the updated caused. Unfortunately I had to switch to another icon-library because the dashicons were just to limited in its functionality and required a lot of styling-fixes to adjust their position properly.

You can now change the style of the icons with the following css-selector:

#af-wrapper div[id="forum-1"] .forum-status:before

 

Quote from ray on April 17, 2019, 11:41 am

Hi @asgaros

Close but not quite

If I use

#af-wrapper div[id="forum-1"].forum .forum-status:before {
   content:"";
   background: url(https://image.flaticon.com/icons/svg/160/160078.svg);
    color: black;
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

I get no icons – just a blank column for forum 1 (with your icons in my other forums)

If I use

#af-wrapper div[id="forum-1"].forum .forum-status:before {
   background: url(https://image.flaticon.com/icons/svg/160/160078.svg);
    color: black;
    background-size: 40px 40px;
    background-repeat: no-repeat;
}

I get my icon with your icon superimposed over the top of it.  Nothing I have tried removes just your icon.  What I am I missing?

Quote from Erenbur on April 17, 2019, 7:08 pm

I will join. After updating the forum icons are not displayed. As I understand it, on my website the forum is trying to load icons from somewhere on the site, not from the network. Switching the “Load Font Awesome icon library” setting does not lead to a positive result. The download still comes from offline. Thomas, how can you solve this problem? Maybe in some kind of folder on my site file with icons to write and the forum from there will start to download them? It would be great.

Quote from Erenbur on April 17, 2019, 7:21 pm

While writing, I understood what the problem was. Conflict with this plugin: https://ru.wordpress.org/plugins/clearfy/

The plugin made Fontawesome asynchronous loading. Removed this setting – the icons began to load.

Quote from Asgaros on April 17, 2019, 9:18 pm

Hello @ray

Please try it again with the following code:

#af-wrapper div[id="forum-1"].forum .forum-status:before {
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/160/160078.svg);
    color: black;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
}