Forumlarınızda yer alan navigasyon başlıklarına eklenti kullanmadan ikon ekleyebileceğiniz bir anlatımı aşağıda örnekleriyle paylaşıyorum.
Bunun için yapmanız gerekenler sırasıyla;
.p-navEl a::before{font-family: 'Font Awesome 5 Pro'; padding-right: 5px;}
.p-navEl a[data-nav-id="dbtechCredits"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="dbtechCredits"]:before
{ .m-faContent(@fa-var-sack-dollar);}
.p-navEl a[data-nav-id="mjstSupportTicket"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="mjstSupportTicket"]:before
{ .m-faContent(@fa-var-umbrella);}
.p-navEl a[data-nav-id="forums"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="forums"]:before
{ .m-faContent(@fa-var-house-signal);}
.p-navEl a[data-nav-id="EWRporta"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="EWRporta"]:before
{ .m-faContent(@fa-var-photo-video);}
/*****************************/
Yukarıdaki örneği forumunuza nasıl uygulayacaksınız?
Kod bloğunun ilk satırında, ikonları fontawesome 5 kullanacağımız için önce bunu ekledik.
İkinci ve üçüncü satırlarda kırmızı olarak belirlediğimiz ise navigasyon alanımızda bulunan butonlardır.
Bu butonlara ikon ekleyebilmemiz için;
Admin panelde navigasyon yömeticisine gelip, açılan sayfada ikon eklemek istediğiniz naviyosyan başlığına tıklayın ve Navigasyon Kimliği ID yazan kutucuktaki metni kopyalayıp bu alana girmelisiniz.
Paragrafın son satırında mavi renk ile eklediğimiz de fontawesome ikon için seçtiğimiz isimdir. Bu alanda @fa-var sabit kalarak, hemen arkasına seçtiğiniz ikon adını yazmalısınız.
Bu işlemden sonra şablonunuzu kaydedip çıkın. Hepsi bu kadar.
Bunun için yapmanız gerekenler sırasıyla;
- Admin panel 'e girin
- Görünüm & Diller → Temalar kısmına gidin.
- Düzenlemek istediğiniz temanın sağ tarafındaki Şablonları Yönet butonuna tıklayın.
- extra.less dosyasını açın.
- Aşağıdaki CSS kodunu ekleyin ve kaydedin:
.p-navEl a::before{font-family: 'Font Awesome 5 Pro'; padding-right: 5px;}
.p-navEl a[data-nav-id="dbtechCredits"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="dbtechCredits"]:before
{ .m-faContent(@fa-var-sack-dollar);}
.p-navEl a[data-nav-id="mjstSupportTicket"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="mjstSupportTicket"]:before
{ .m-faContent(@fa-var-umbrella);}
.p-navEl a[data-nav-id="forums"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="forums"]:before
{ .m-faContent(@fa-var-house-signal);}
.p-navEl a[data-nav-id="EWRporta"]:before,
.offCanvasMenu-linkHolder a[data-nav-id="EWRporta"]:before
{ .m-faContent(@fa-var-photo-video);}
/*****************************/
Yukarıdaki örneği forumunuza nasıl uygulayacaksınız?
Kod bloğunun ilk satırında, ikonları fontawesome 5 kullanacağımız için önce bunu ekledik.
İkinci ve üçüncü satırlarda kırmızı olarak belirlediğimiz ise navigasyon alanımızda bulunan butonlardır.
Bu butonlara ikon ekleyebilmemiz için;
Admin panelde navigasyon yömeticisine gelip, açılan sayfada ikon eklemek istediğiniz naviyosyan başlığına tıklayın ve Navigasyon Kimliği ID yazan kutucuktaki metni kopyalayıp bu alana girmelisiniz.
Paragrafın son satırında mavi renk ile eklediğimiz de fontawesome ikon için seçtiğimiz isimdir. Bu alanda @fa-var sabit kalarak, hemen arkasına seçtiğiniz ikon adını yazmalısınız.
Bu işlemden sonra şablonunuzu kaydedip çıkın. Hepsi bu kadar.