Helo everyone, umm.. can i change my flarum sidebar tag using font awesome icon?

Each of your tags has an ID which is asigned via a specific CSS class to the <li> element holding the tag-link. You can add custom CSS rules targeting this class to achieve your desired effect. In the case of your first tag with the ID of 1, the specific class of the <li> element is item-tag1, and the ruleset for your FontAwesome icon could look like:

li.item-tag1 > a > span::before {
    font-family: FontAwesome;
    content: "\f0eb";
    color: #d6a700;
    font-size: 95%;
    line-height: 16px;
    vertical-align: top;
}

You will have to adjust the color, font-size and line-height to the rest of your forum, but you get the idea. Furthermore you have to repeat the whole thing for each tag, though you may combine parts of them to save some bytes, e.g.:

li.item-tag1 > a > span::before,
li.item-tag2 > a > span::before {
    font-family: FontAwesome;
    font-size: 95%;
    line-height: 16px;
    vertical-align: top;
}
li.item-tag1 > a > span::before {
    content: "\f0eb";
    color: #a700d6;
}
li.item-tag2 > a > span::before {
    content: "\f1cd";
    color: #d84040;
}

These CSS rules you can add via the admin panel: Appearance > Custom Styles.

  • FBI likes this.
9 days later

Dafterz

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.

    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.

        a year later

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

        3 months later

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

        2 months later
        5 months later

        • [deleted]

        • Post #15

        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: "";
}
        5 months later
        3 months later

        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.

            3 years later