Add icon next to header link text

Contribute Feature

AI-generated summary

Add icon next to header link text discussion summary:

davidkingham requested adding a Font Awesome icon next to the link text in the header, providing an example image. vinothkannans replied that it’s not currently possible without modifying the component.

davidkingham experienced overlap issues with the primary header when trying to add a border and suggested adding a class to each button for individual styling.

However, davidkingham later provided a simple CSS solution to add Font Awesome icons using the ::before pseudo-element, offering a code example that adds different icons to each navigation pill.

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.

Highlight current page in Brand Header links
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