# 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:** [June 18, 2018, 2:26am UTC](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631 "2018-06-18T02:26:42Z")
**Posts on this page:** 4
**Page:** 1

<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: [June 18, 2018, 2:26am UTC](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631/1 "2018-06-18T02:26:42Z")

</div>

Would it be possible to add a font awesome icon next to the link similar to this?

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/d/8dc9622cc1eb144931eeec6b9d5aab647b13740f.png)

---

<div class="post-metadata">

### Author: ![vinothkannans](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/vinothkannans/32/86465_2.png) [@vinothkannans](https://meta.discourse.org/u/vinothkannans)
#### Post date: [June 18, 2018, 4:58am UTC](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631/2 "2018-06-18T04:58:37Z")

</div>

Currently it’s not possible. You need to do some changes in the component to achieve that.

---

<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: [June 18, 2018, 3:49pm UTC](https://meta.discourse.org/t/add-icon-next-to-header-link-text/312631/3 "2018-06-18T15:49:05Z")

</div>

There seems to be some overlap with the primary header, I tried to add a border and the primary header is covering it up. If I change the height to 47px in inspector I can see the border, but if I add this to the css it doesn’t work.

```
.b-header {
    background-color: #393F4D !important;
    border-bottom-style: solid;
    border-color: #feda6a;
    border-width: 1px;
    height: 47px;
}

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/f/ffa6d727ee6345d9aec641246a58a4facca7edd4.png)

Another request would be to have the current page highlighted, or at least give each button it’s own class so I could change the color of a single button.

---

<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: [July 31, 2018, 3:06am 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";
}

```