Aggiungi un'icona accanto al testo del collegamento nell'intestazione

[davidkingham]

Sarebbe possibile aggiungere un’icona Font Awesome accanto al link, simile a questa?

[vinothkannans (Vinoth Kannan)]

Al momento non è possibile. È necessario apportare alcune modifiche al componente per ottenere questo risultato.

[davidkingham]

Sembra esserci una sovrapposizione con l’intestazione principale: ho provato ad aggiungere un bordo, ma l’intestazione principale lo copre. Se modifico l’altezza a 47px nell’ispettore, riesco a vedere il bordo, ma se aggiungo questo al CSS non funziona.

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

Un’altra richiesta sarebbe quella di evidenziare la pagina corrente, o almeno assegnare a ciascun pulsante la propria classe, così da poter cambiare il colore di un singolo pulsante.

[davidkingham]

Per chiunque voglia aggiungere icone FontAwesome, ecco una semplice soluzione 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";
}