Add icon next to header link text

feature
1

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

image
image1058×111 8.04 KB

2 Likes
2

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

6 Likes
3

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
image563×764 38.1 KB

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.

4

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";
}
6 Likes