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
  • 2 Votes
    1 Posts
    640 Views
    No one has replied
  • 3 Votes
    2 Posts
    2k Views
    DownPW
    Very great
  • 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.
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • fading in /tags page

    Solved Customisation nodebb
    32
    1
    30 Votes
    32 Posts
    13k Views
    DownPW
    Fix working perfectly
  • 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
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    63k Views
    phenomlab
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • 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