Quote from ray on April 22, 2018, 5:04 am

These Dashicons are very limited and are focused towards software development use rather than end user viewing.  For example I have a forum called ‘Electronics Group’ (for my members who are interested in electronics) but I can’t find ny suitable icon in Dashicons that reflects ‘electronics’. Yet google shows many hits for ‘svg icon electronics’ searches. It would be really usefull to have a ‘simple’ way to use other icon libraries instead (or as well as) dashicons. Is this a possibility?

As i only have a few forum I could use css code such as
div#forum-category-4 {
background-image: url(https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png);
}
as you have provided above for background images.
But I have no idea as to what code to use to add an category icon (as you have done for ‘statistics’) or a non-dashicon icon my forums.

Quote from Asgaros on April 24, 2018, 8:57 pm

Hello @ray

Yes, I understand your problem. At the moment I only added support for the dashicons-library because its an icon-library which is included in WordPress by default. I am not a big fan of adding third-party libraries to my plugin because otherwise I have to update Asgaros Forum everytime a new version of those third-party libraries is released (because of security fixes, for example).

Here is another example for an icon:

div#forum-category-4:before {
    height: 32px;
    line-height: 32px;
    padding-right: 5px;
    background-image: url(https://s2.coinmarketcap.com/static/img/coins/32x32/1528.png);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    width: 32px;
}

 

Quote from ray on April 25, 2018, 3:47 am

div#forum-category-48 is for 'category id 48' so what is the equivalent for a 'forum'

sorry but
div#forum-category-48:before {
    height: 32px;
    line-height: 32px;
    padding-right: 5px;
    background-image: url(https://s2.coinmarketcap.com/static/img/coins/32x32/1528.png);
    background-size: 32px 32px;
    background-repeat: no-repeat;
    width: 32px;
}
doesn't work for me as there is nothing showing before the category label
but
div#forum-category-48 {
 background-image: url(https://s2.coinmarketcap.com/static/img/coins/32x32/1528.png);;
}
does (so I have the id number correct) - but it only changes the background image by repeating the icon several times.
If I add " background-repeat: no-repeat; " then the repeating stops happening 
but there is no spacing between the icon and my category label so my label text overlaps the icon image.
If I add all the other lines of code except ":before" nothing else changes.
When I add ":before" (to make it the same as your example code) then the icon is not shown at all

any suggestions why ":before" is not working for me?

Quote from Asgaros on April 25, 2018, 10:53 am

Hello @ray

The icons for forums can be selected like this:

#forum-123 .forum-status:before {
    /* ... */
}

If you need to adjust the spacing/alignment, you can use the padding/margin attributes, e.g.:

https://www.w3schools.com/css/css_margin.asp

Quote from ray on April 25, 2018, 12:55 pm

ok thanks for your replies

Quote from jimcroisdale on April 25, 2018, 1:03 pm

Can someone lay out that code in one go, for a noob like me?

Is 32x32px the size required also?

Jim

Quote from Asgaros on April 25, 2018, 3:13 pm

No, the code is just an example and depends on the image/icon you want to use and your overall style. So there is not a simple code which you can use – custom modifications are necessary in most of the cases.

Quote from N3k0 on July 13, 2018, 6:24 pm

Quote from Asgaros on April 25, 2018, 10:53 am

Hello @ray

The icons for forums can be selected like this:

#forum-123 .forum-status:before {
    /* ... */
}

1. #forum-123 .forum-status:before {
2. /* … */
3. }

#forum-123 .forum-status:before {
    /* ... */
}

If you need to adjust the spacing/alignment, you can use the padding/margin attributes, e.g.:

https://www.w3schools.com/css/css_margin.asp

I tryit to use this to add fontawesome icon, but do not show the icon.

In the header I add

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Then the CSS

#forum-7 .forum-status:before {
    font-family: "Font Awesome 5 Free"; 
    font-weight: 400; 
    content: "\f412";
}

😛

Cheers!