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
  • CSS code customization for the link preview plugin

    Solved Customisation css nodebb
    6
    2
    3 Votes
    6 Posts
    3k Views
    phenomlab
    @kadir-ay-0 marking as resolved based on https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony/5 Please do not raise requests in two places - here and the NodeBB forums. All this does is create unnecessary load for both parties.
  • Widget | CSS customization

    Solved WordPress css
    53
    17 Votes
    53 Posts
    19k Views
    phenomlab
    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.
  • 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.
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    2k Views
    DownPW
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that “broken neon light” look that you see in films. It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • 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
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • 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