Change tag left sidebar icon with custom font awesome icon

Dafterz

I want to change this to font awesome,its possible?

enter image description here

Pollux

Yes, it is possible.

My hands-on, however, only covers the icons in the listing views like "all discussions" and specific tag views. If you want to extend it to the admin panel like in your screenshot or to the dialog-modal for the selcection of tags when starting a new discussion, you have to adapt my instructions to the given node structure.

If you follow my approach, you should make yourself familiar with the CSS syntax as well as the means to inspect the given node structure and the already applied CSS rules, for instance with Firefox' Inspect element command.

sheldon

Dafterz

Yes, it's relatively easy.....

/* Side Tags */
.item-tag1 .icon.TagIcon.Button-icon, .item-tag2 .icon.TagIcon.Button-icon,
.item-tag3 .icon.TagIcon.Button-icon, .item-tag4 .icon.TagIcon.Button-icon,
.item-tag16 .icon.TagIcon.Button-icon, .item-tag8 .icon.TagIcon.Button-icon,
.item-tag5 .icon.TagIcon.Button-icon, .item-tag6 .icon.TagIcon.Button-icon,
.item-tag7 .icon.TagIcon.Button-icon, .item-tag9 .icon.TagIcon.Button-icon,
.item-tag10 .icon.TagIcon.Button-icon, .item-tag11 .icon.TagIcon.Button-icon,
.item-tag13 .icon.TagIcon.Button-icon, .item-tag14 .icon.TagIcon.Button-icon,
.item-tag15 .icon.TagIcon.Button-icon, .item-tag16 .icon.TagIcon.Button-icon,
.item-tag12 .icon.TagIcon.Button-icon, .item-tag17 .icon.TagIcon.Button-icon,
.item-tag24 .icon.TagIcon.Button-icon, .item-tag25 .icon.TagIcon.Button-icon,
.item-tag26 .icon.TagIcon.Button-icon, .item-tag27 .icon.TagIcon.Button-icon {
    background-color: transparent !important;
}
.item-tag1 > a > span:before {
    content: "\f129";
    font-family: FontAwesome;
    font-weight: normal;
    line-height: 17px;
    vertical-align: top;
    padding-left: 3px;
    color: #009688;
}
.item-tag2 > a > span:before {
    content: "\f0a1";
    font-family: FontAwesome;
    font-weight: normal;
    line-height: 17px;
    vertical-align: top;
    padding-left: 3px;
    color: #f44336;
}
.item-tag3 > a > span:before {
    content: "\f0eb";
    font-family: FontAwesome;
    font-weight: normal;
    line-height: 17px;
    vertical-align: top;
    padding-left: 3px;
    color: #ff5722;

You find the tag #, hide the background color, then add the font awesome icon (or whatever icon you want with :before.

I'm sure there is a more more concise way of doing it, but this is how I got it done.

Dafterz

sheldon Whoa,Nice! I will try it! Thanks for your help dude ?

FebriTriHarmoko

sheldon Love this ? Thanks for your share brother... ?

Kryonoglou

sheldon I copy paste your code and I see change only to the first tag.
http://prntscr.com/kuektu

I found the solution. My id wasn't 1-2-3 but 1-4-56 and etc.

almozoghi

sheldon hello sir, i tried your way but it didn't work.
it shows an empty boxes.
can you help me with that, no coding knowledge.
cheers.

Kryonoglou

I don't really understand how we Change the Icons of tags.
Can you explain it again with more simple way? ?

renato

Just an update: on beta8, which uses Font Awesome 5, we need to use "Font Awesome 5 Free" as the font-family.

[deleted]

I took the much more efficient (lazy) route with this - bearing in mind I wanted the tag icon for all tags, and not individual icons...

/* Side Tags */
span.icon.TagIcon.Button-icon {
    background: transparent !important;
}
[class*="item-tag"] a span:before {
    content: "\f02b";
    font-family: "fontawesome";
    font-weight: normal;
    line-height: 17px;
    vertical-align: top;
    padding-left: 3px;
    color: #0f6a8c;
}
.item-tags a span:before {
content: "";
}

luceos

Upcoming beta 9 allows you to configure an icon for your tags. You can see that on our solved tag.

samtto

luceos we can't use Font Awesome in china. can u help?

tolgaaaltas

almozoghi Admin Area > Tags > Edit a Tag > Visit FontAwesome and select one icon (for example this one) > You can see <i class="fas fa-hand-holding-heart"></i> code on the page. Copy class value fas fa-hand-holding-heart and paste to your Tags's Icon form.

almozoghi

tolgaaaltas thank you so much, you are the best.
be well

bimbim

How if custom image svg?