إضافة رمز بجانب نص رابط الرأس

ساهم ميزة
1

هل من الممكن إضافة أيقونة Font Awesome بجانب الرابط مشابهة لهذا؟

image
image1058×111 8.04 KB

إعجابَين (2)
2

حاليًا، هذا غير ممكن. ستحتاج إلى إجراء بعض التغييرات في المكون لتحقيق ذلك.

6 إعجابات
3

يبدو أن هناك تداخلاً مع الرأس الأساسي، لقد حاولت إضافة حدود لكن الرأس الأساسي يغطيها. إذا قمت بتغيير الارتفاع إلى 47px في أداة الفحص (inspector) يمكنني رؤية الحدود، لكن عند إضافة هذا إلى ملف CSS لا يعمل.

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

image
image563×764 38.1 KB

طلب آخر هو تمييز الصفحة الحالية، أو على الأقل إعطاء كل زر صفته الخاصة (class) حتى أتمكن من تغيير لون زر واحد فقط.

Highlight current page in Brand Header links
4

لأي شخص يرغب في إضافة أيقونات Font Awesome، إليك حل بسيط باستخدام 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";
}
6 إعجابات