How to change forum icon to custom image

#1 · May 5, 2022, 12:40 pm

Hello.
I am creating a forum and I want to change the icon to a custom image.
I attach an image indicating in red the icon that I want to change to an image.

Thank you very much and greetings

Uploaded files:

#2 · May 5, 2022, 3:33 pm

Go in the Backend to Forum/Structure.

Go to the forum where you want to change the icon.

Go to the “Icon” column

There, as in my motorcycle forum, enter it in this form:

fas fa-motorcycle

You can search for icons here: List of available icons.

Here you can see how it looks in my motorbike Copperforum.

https://www.chopper-motorrad.de

Jim and Caba have reacted to this post.

Nur ein Biker weiß, warum ein Hund seinen Kopf aus einem Autofenster steckt.
Only a biker knows why a dog sticks its head out a car window.

#3 · May 5, 2022, 4:52 pm

@caba For replacing fa icons with custom images (not changing to another fa-icon, which is done as @biker described). This goes in your theme’s style.css file. I tested this and it works, but there may be a better way.

Ideally you use different ones for read and unread. I tried 48×48 px images, but 32×32 might be better. Of course you need to change the forum id number to the forum you’re changing.

/* Changing forum icon to custom images for read and unread fora */
#af-wrapper div[id="forum-1257"] .read i {
  content: url("https://icons.iconarchive.com/icons/wikipedia/flags/48/UA-Ukraine-Flag-icon.png");
}
#af-wrapper div[id="forum-1257"] .unread i {
  content: url("https://icons.iconarchive.com/icons/google/noto-emoji-smileys/48/10032-sad-but-relieved-face-icon.png");
}

Edit: I just saw that @asgaros provided an example that should work with the present icon system. I didn’t try it. It’s more complicated but may have some advantage. Also note that example is not customized to have separate read/unread icons.

https://asgaros.com/support/topic/custom-icons-issue/#postid-7259

Another edit: I THINK that the difference in the two methods is that mine can be used if your images are at their final size. You can’t resize on the fly using this method. If you need to resize the image in the CSS, use asgaros’s method in the link above.

Caba has reacted to this post.

#4 · May 9, 2022, 4:57 pm

Thank you very much!!!

I managed to do it with your method.

Greetings!

Uploaded files:

#5 · May 9, 2022, 4:57 pm

Quote from Jim on May 5, 2022, 4:52 pm

@caba For replacing fa icons with custom images (not changing to another fa-icon, which is done as @biker described). This goes in your theme’s style.css file. I tested this and it works, but there may be a better way.

Ideally you use different ones for read and unread. I tried 48×48 px images, but 32×32 might be better. Of course you need to change the forum id number to the forum you’re changing.
/* Changing forum icon to custom images for read and unread fora */
#af-wrapper div[id="forum-1257"] .read i {
  content: url("https://icons.iconarchive.com/icons/wikipedia/flags/48/UA-Ukraine-Flag-icon.png");
}
#af-wrapper div[id="forum-1257"] .unread i {
  content: url("https://icons.iconarchive.com/icons/google/noto-emoji-smileys/48/10032-sad-but-relieved-face-icon.png");
}
Edit: I just saw that @asgaros provided an example that should work with the present icon system. I didn’t try it. It’s more complicated but may have some advantage. Also note that example is not customized to have separate read/unread icons.

https://asgaros.com/support/topic/custom-icons-issue/#postid-7259

Another edit: I THINK that the difference in the two methods is that mine can be used if your images are at their final size. You can’t resize on the fly using this method. If you need to resize the image in the CSS, use asgaros’s method in the link above.

Thank you very much!!!

I managed to do it with your method.

Greetings!

Uploaded files: