How to fix font awesome icons

[Denis_Frosty_Andreyc (Den Andreychuk)]

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

Icon:

[Johani (Joe)]

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;
}

[Denis_Frosty_Andreyc (Den Andreychuk)]

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

[Johani (Joe)]

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.

^ this also includes adding margin-right: 5px