Skip to content

tag icon in front of tags

Solved Customisation
5 2 2.0k 1
  • wrote on last edited by
    #1

    Hi @phenomlab , you have a tag icon in front of tag words, and I believe it looks cooler.

    how do you achieve this?

  • Hi @phenomlab , you have a tag icon in front of tag words, and I believe it looks cooler.

    how do you achieve this?

    wrote on last edited by
    #2

    @crazycells Hi, I use the below CSS for this

    span.tag:before {
        content: "\f02c";
        font-family: "Font Awesome 5 Pro";
        margin-right: 5px;
        margin-left: 5px;
    }
    
  • phenomlab phenomlab has marked this topic as solved on
  • @crazycells Hi, I use the below CSS for this

    span.tag:before {
        content: "\f02c";
        font-family: "Font Awesome 5 Pro";
        margin-right: 5px;
        margin-left: 5px;
    }
    
    wrote on last edited by
    #3

    @phenomlab for me, it shows a vegetable 😄 lol
    how can I fix this? Thanks a lot.

    Screen Shot 2022-01-20 at 11.08.22 AM.png

  • @phenomlab for me, it shows a vegetable 😄 lol
    how can I fix this? Thanks a lot.

    Screen Shot 2022-01-20 at 11.08.22 AM.png

    wrote on last edited by phenomlab
    #4

    @crazycells Are you using Font Awesome Free ? If so, try this

    span.tag:before {
        content: "\f02b";
        font-family: "Font Awesome 5 Free";
        margin-right: 5px;
        margin-left: 5px;
        font-weight: 900;
    }
    
  • @crazycells Are you using Font Awesome Free ? If so, try this

    span.tag:before {
        content: "\f02b";
        font-family: "Font Awesome 5 Free";
        margin-right: 5px;
        margin-left: 5px;
        font-weight: 900;
    }
    
    wrote on last edited by
    #5

    @phenomlab said in tag icon in front of tags:

    @crazycells Are you using Font Awesome Free ? If so, try this

    span.tag:before {
        content: "\f02b";
        font-family: "Font Awesome 5 Free";
        margin-right: 5px;
        margin-left: 5px;
        font-weight: 900;
    }
    

    yeap, this worked 👍 thanks a lot.


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee ☕
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Nodebb icon on google page

    Solved Customisation nodebb
    9
    1
    4 Votes
    9 Posts
    4k Views
    phenomlab
    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    5k Views
    phenomlab
    @cagatay That matches what I see [image: 4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • Quote design CSS

    Solved Customisation css quote
    15
    1
    4 Votes
    15 Posts
    6k Views
    phenomlab
    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning. Good spot
  • Bottom footer navbar button extend

    Solved Customisation css javascript customisation footer navbar
    32
    9 Votes
    32 Posts
    16k Views
    phenomlab
    @DownPW said in Bottom footer navbar button extend: Oh my god, it’s beautiful mark I liked this design so much, I’ve implemented it here. I intend to do a lot more with the footer in due course, so hiding it makes a lot of sense. Thanks @DownPW for the idea and initial concept
  • CSS codes for fa-info icon

    Solved Customisation nodebb
    9
    1
    6 Votes
    9 Posts
    3k Views
    crazycells
    I have just figured it out… it can be targeted with text-decoration-color: I was mistakenly using color
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    3k Views
    JAC
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    10k Views
    RiekMedia
    @phenomlab okay