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.
  • NodeBB v3 Vote Icon

    Solved Customisation icons vote icons
    9
    2 Votes
    9 Posts
    3k Views
    cagatay
    @phenomlab forget it, look likes good with your codes.
  • 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]
  • 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] Reply Button/arrow answer

    Solved Customisation css nodebb
    25
    4
    4 Votes
    25 Posts
    12k Views
    DownPW
    Topic open https://sudonix.com/topic/207/nodebb-help-for-my-custom-css
  • Avatar on Topic Header

    Solved Customisation css avatar header
    9
    1
    0 Votes
    9 Posts
    3k Views
    JAC
    @jac said in Avatar on Topic Header: @downpw said in Avatar on Topic Header: Great Plugin I make it a bit cleaner via this CSS code: /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; } Do you have a screenshot of how this looks with the CSS change? Just added this change, thanks @DownPW
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    7k Views
    phenomlab
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3
  • 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