ヘッダーのリンクテキストの横にアイコンを追加

[davidkingham]

リンクの横に、このようなフォント・アワesomeのアイコンを追加することは可能でしょうか？

[vinothkannans (Vinoth Kannan)]

現在では不可能です。そのためにはコンポーネントをいくつか変更する必要があります。

[davidkingham]

プライマリヘッダーと一部重なっているようです。ボーダーを追加しようとしましたが、プライマリヘッダーがそれを覆ってしまっています。インスペクターで高さを 47px に変更するとボーダーが表示されるのですが、これを CSS に追加しても機能しません。

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

もう一つのリクエストとして、現在のページをハイライト表示するか、あるいは各ボタンに独自のクラスを割り当てて、単一のボタンの色を変更できるようにしていただけると助かります。

[davidkingham]

FontAwesome アイコンを追加したい方のために、簡単な 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";
}