Agregar ícono junto al texto del enlace del encabezado

[davidkingham]

¿Sería posible añadir un icono de Font Awesome junto al enlace, similar a este?

[vinothkannans (Vinoth Kannan)]

Actualmente no es posible. Necesita realizar algunos cambios en el componente para lograrlo.

[davidkingham]

Parece haber cierta superposición con el encabezado principal; intenté agregar un borde, pero el encabezado principal lo está ocultando. Si cambio la altura a 47px en el inspector, puedo ver el borde, pero si agrego esto al CSS no funciona.

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

Otra solicitud sería tener la página actual resaltada, o al menos dar a cada botón su propia clase para que pueda cambiar el color de un solo botón.

[davidkingham]

Para cualquiera que quiera agregar iconos de Font Awesome, aquí hay una solución simple en CSS.

.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";
}