Adicionar ícone ao lado do texto do link do cabeçalho

[davidkingham]

Seria possível adicionar um ícone do Font Awesome ao lado do link, semelhante a este?

[vinothkannans (Vinoth Kannan)]

Atualmente não é possível. Você precisa fazer algumas alterações no componente para alcançar isso.

[davidkingham]

Parece haver alguma sobreposição com o cabeçalho principal; tentei adicionar uma borda, mas o cabeçalho principal está cobrindo-a. Se eu alterar a altura para 47px no inspetor, consigo ver a borda, mas se eu adicionar isso ao CSS, não funciona.

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

Outro pedido seria ter a página atual destacada ou, pelo menos, dar a cada botão sua própria classe para que eu pudesse alterar a cor de um único botão.

[davidkingham]

Para quem deseja adicionar ícones do FontAwesome, aqui está uma solução simples em 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";
}