Ajouter une icône à côté du texte du lien d'en-tête

[davidkingham]

Serait-il possible d’ajouter une icône Font Awesome à côté du lien, similaire à ceci ?

[vinothkannans (Vinoth Kannan)]

Actuellement, ce n’est pas possible. Vous devez apporter quelques modifications au composant pour y parvenir.

[davidkingham]

Il semble y avoir un chevauchement avec l’en-tête principal. J’ai essayé d’ajouter une bordure, mais l’en-tête principal la masque. Si je modifie la hauteur à 47 px dans l’inspecteur, je peux voir la bordure, mais si j’ajoute ceci au CSS, cela ne fonctionne pas.

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

Une autre demande serait de mettre en surbrillance la page actuelle, ou tout au moins d’attribuer sa propre classe à chaque bouton afin que je puisse modifier la couleur d’un seul bouton.

[davidkingham]

Pour ceux qui souhaitent ajouter des icônes FontAwesome, voici une solution CSS simple.

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