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
  • Rotating Star Effect

    Solved Let's Build It wordpress css
    17
    12 Votes
    17 Posts
    5k Views
    Hari
    @phenomlab thanks a lot for these, both of the below are awesome! https://codepen.io/bennettfeely/pen/vYLmYJz https://codepen.io/C-L-the-selector/pen/MWZbWBo
  • Changing the look of recent cards

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    893 Views
    No one has replied
  • New message CSS problem

    Unsolved Customisation css
    11
    1
    2 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?
  • Multiple link on one ico non Navbar

    Solved Customisation links css navbar
    7
    1
    2 Votes
    7 Posts
    3k Views
    DownPW
    yeah you’re right @phenomlab. Problem of NodeBB Version
  • Bug Navbar CSS

    Solved Customisation navbar css
    3
    1 Votes
    3 Posts
    2k Views
    DownPW
    Not better way. Thanks.
  • 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
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.