# Add icon next to header link text

**URL:** <https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631>\
**Category:** Feature\
**Tags:** brand-header\
**Created:** [6월 18, 2018, 2:26오전 UTC](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631 "2018-06-18T02:26:42Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)\
**Post date:** [7월 31, 2018, 3:06오전 UTC](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631/4 "2018-07-31T03:06:43Z")

</div>

For anyone that wants to add fontawesome icons here is a simple css solution.

```
.b-header a::before{
      padding-right: 8px;
      font-family: "FontAwesome"
    }

.b-header .nav-pills > li:nth-child(1) a::before{
	content: "\f015";
}

.b-header .nav-pills > li:nth-child(2) a::before{
	content: "\f086";
}

.b-header .nav-pills > li:nth-child(3) a::before{
	content: "\f1ea";
}

.b-header .nav-pills > li:nth-child(4) a::before{
	content: "\f005";
}

.b-header .nav-pills > li:nth-child(5) a::before{
	content: "\f187";
}

.b-header .nav-pills > li:nth-child(6) a::before{
	content: "\f05a";
}

.b-header .nav-pills > li:nth-child(7) a::before{
	content: "\f0e0";
}

```

---

_[View the full topic](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631)._