Would it be possible to add a font awesome icon next to the link similar to this?
2 Likes
Currently it’s not possible. You need to do some changes in the component to achieve that.
6 Likes
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;
}
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.
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