Skip to content
Sudonix

tag icon in front of tags

Solved Customisation
5 2 2.0k 1
  • crazycells
    crazycells
    crazycells
    wrote on
    #1

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

    how do you achieve this?

    0
  • crazycells crazycells

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

    how do you achieve this?

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #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;
}

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • phenomlab phenomlab has marked this topic as solved on
  • phenomlab phenomlab

    @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;
}
    crazycells
    crazycells
    crazycells
    wrote on
    #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

    0
  • crazycells crazycells

    @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
    phenomlab
    phenomlab
    wrote on
    #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;
}

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    1
  • phenomlab phenomlab

    @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
    crazycells
    crazycells
    wrote on
    #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.

    1
Log in to reply

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
  • crazycells

    navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    3k Views
    phenomlab
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Sala

    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.
  • cagatay

    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]
  • DownPW

    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?
  • DownPW

    [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    168k Views
    cagatay
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.
  • DownPW

    [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.
  • JAC

    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
  • Mike Jones

    CSS Help on my Flarum

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    3k Views
    phenomlab
    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.