Fügen Sie neben dem Header-Link-Text ein Symbol hinzu

Beitragen Merkmal
1

Wäre es möglich, neben dem Link ein Font Awesome-Symbol ähnlich wie hier hinzuzufügen?

image
image1058×111 8.04 KB

2 „Gefällt mir“
2

Derzeit ist dies nicht möglich. Sie müssen einige Änderungen an der Komponente vornehmen, um dies zu erreichen.

6 „Gefällt mir“
3

Es scheint eine Überlappung mit dem primären Header zu geben. Ich habe versucht, einen Rahmen hinzuzufügen, aber der primäre Header verdeckt ihn. Wenn ich die Höhe im Inspektor auf 47 px ändere, kann ich den Rahmen sehen, aber wenn ich dies zum CSS hinzufüge, funktioniert es nicht.

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

image
image563×764 38.1 KB

Eine weitere Bitte wäre, die aktuelle Seite hervorzuheben oder zumindest jeder Schaltfläche ihre eigene Klasse zu geben, damit ich die Farbe einer einzelnen Schaltfläche ändern könnte.

Highlight current page in Brand Header links
4

Für alle, die FontAwesome-Icons hinzufügen möchten, hier ist eine einfache CSS-Lösung.

.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 „Gefällt mir“