How to fix font awesome icons


(Den Andreychuk) #1
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:
Снимок экрана (553)


(Joe) #2

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

(Den Andreychuk) #4

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


(Joe) #5

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