# How to fix font awesome icons

**URL:** https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665
**Category:** Support
**Created:** [10.Январь.2018 13:31:58 UTC](https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665 "2018-01-10T13:31:58Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Denis\_Frosty\_Andreyc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denis_frosty_andreyc/32/87114_2.png) [@Denis\_Frosty\_Andreyc](https://meta.discourse.org/u/Denis_Frosty_Andreyc)
#### Post date: [10.Январь.2018 13:31:58 UTC](https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665/1 "2018-01-10T13:31:58Z")

</div>

```
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

 ![Снимок экрана (552)](https://global.discourse-cdn.com/meta/original/3X/8/a/8aa651d29ac1baae5125155f1166d278287eb5bc.png)  
Icon:  
 ![Снимок экрана (553)](https://global.discourse-cdn.com/meta/original/3X/0/0/005c4d4ff8a80e2bb618d27eeaf03a4065e5d4ff.png)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10.Январь.2018 13:37:11 UTC](https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665/2 "2018-01-10T13:37:11Z")

</div>

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

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

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

```

---

<div class="post-metadata">

### Author: ![Denis\_Frosty\_Andreyc](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denis_frosty_andreyc/32/87114_2.png) [@Denis\_Frosty\_Andreyc](https://meta.discourse.org/u/Denis_Frosty_Andreyc)
#### Post date: [10.Январь.2018 13:51:18 UTC](https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665/4 "2018-01-10T13:51:18Z")

</div>

thanks for your reply. I had another question. Now the icon display outside the frame. How do I put it inside?  
 ![Снимок экрана (556)](https://global.discourse-cdn.com/meta/original/3X/c/d/cd0b6b71d724295516bc06842d8186649f7f058a.png)

I want to do something like this  
 ![Снимок экрана (557)](https://global.discourse-cdn.com/meta/original/3X/7/0/7048bb4752f8516ac6886873b1eaceeaa77a1728.png)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10.Январь.2018 13:56:45 UTC](https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665/5 "2018-01-10T13:56:45Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/f/a/fa190829e1bdaa35f925eaa1ac6db55936093bbb.PNG)

^ this also includes adding `margin-right: 5px`

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [08.Июнь.2024 12:43:37 UTC](https://meta.discourse.org/t/how-to-fix-font-awesome-icons/77665/6 "2024-06-08T12:43:37Z")

</div>

Эта тема была автоматически закрыта через 2340 дней. Новые ответы больше не принимаются.