How to fix font awesome icons

I just use a mixin

@mixin fAwesome ($fa, $col) {
    &.bullet::before {
        color: $col;
    &.bullet::before {
        content: $fa;

.tag-official { @include fAwesome("\f135", #A2C785); }); }}

to add icons for my tags.
Everything works fine, but the icon does not display in the nav, only an empty square

Снимок экрана (553)

The font for .bullet::before is not set to FontAwesome,

You need to add the equivalent of this to your mixin:

.bullet::before {
     content: "";
     color: black; 
     font: normal normal normal 14px/1 FontAwesome;

thanks for your reply. I had another question. Now the icon display outside the frame. How do I put it inside?

I want to do something like this

Instead of using .tag-official try using a.tag-official to only apply the styles to links inside the list and not on list items if they also share the class.

fontawesome icon on link only

^ this also includes adding margin-right: 5px

1 Like