Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı yada giriş yapmalısınız. Forum üye olmak tamamen ücretsizdir.

Bilgilendirme Navigasyon Yöneticisine Yeni Menu ve Ikon İlavesi

mkucuksari

Destek Ekibi
Yönetici
Destek ekibi
Katılım
20 Ağu 2017
Mesajlar
2,154
Forumda yok diye biliyorum. Öğrendiğim küçük bir detayı sizlerle paylaşayım istedim.

Amacımız : Navigasyon Menüsü - Üst Menüye Yeni Sekme ve Ikon ilavesi

Yeni Sekme- Menü İlavesi:
Bu kısmı zaten çoğumuz biliyoruz ama yine de paylaşalım.

Yönetim Paneli - Kurulumlar - Navigasyon Yöneticisi düğmesine tıklayıp, sağ üst köşede Navigasyon ekle ile istediğimiz Menü ve alt menülei ilave ediyoruz. Örneğin ben şöyle bir şey ilave ettim.

Yeni Menülere Ikon ilavesi : Bildiğim kadarı ile AP tarafında bunu hazır şekilde yapma imkanı yok. Bunun için kod ilavesi yapmamız gerekiyor. Kullandığım temaya ait forumda paylaşılan şu kodlar benim işimi gördü.

İkon görülmesini istediğiniz temanın "Extra.less" dosyasını buluyoruz ( Admin->Görünüm ve Diller ->Şablonlar -> "extra.less" diye aratıyoruz

Şu kodu ilave ediyoruz. (Benim ilave ettiğim Yeni menünün ID tanımı : "extralink" )

Kod:
<xf:comment> Nav Menu Yararli Link ikon ilavesi </xf:comment>
.p-navEl-link[data-nav-id="extralink"]::before {
font-family: FontAwesome !important;
content: '\f095' !important;
}
Kullandığım temadaki ikonların tümü "Material Design Icons". Eğer siz de kendinize uygun olan bir tane seçmek isterseniz, şu siteye bakabilirsiniz. Yukarıdaki kodda yer alan "'\f095" kısmını değiştiriyoruz.

Material Design Icons
 

Ekli dosyalar

Son düzenleme:

TheHypnosis

xFanatik
XGT 2 kullanıcı
Katılım
6 Haz 2019
Mesajlar
184
Forumda yok diye biliyorum. Öğrendiğim küçük bir detayı sizlerle paylaşayım istedim.

Amacımız : Navigasyon Menüsü - Üst Menüye Yeni Sekme ve Ikon ilavesi

Yeni Sekme- Menü İlavesi:
Bu kısmı zaten çoğumuz biliyoruz ama yine de paylaşalım.

Yönetim Paneli - Kurulumlar - Navigasyon Yöneticisi düğmesine tıklayıp, sağ üst köşede Navigasyon ekle ile istediğimiz Menü ve alt menülei ilave ediyoruz. Örneğin ben şöyle bir şey ilave ettim.

Yeni Menülere Ikon ilavesi : Bildiğim kadarı ile AP tarafında bunu hazır şekilde yapma imkanı yok. Bunun için kod ilavesi yapmamız gerekiyor. Kullandığım temaya ait forumda paylaşılan şu kodlar benim işimi gördü.

İkon görülmesini istediğiniz temanın "Extra.less" dosyasını buluyoruz ( Admin->Görünüm ve Diller ->Şablonlar -> "extra.less" diye aratıyoruz

Şu kodu ilave ediyoruz. (Benim ilave ettiğim Yeni menünün ID tanımı : "extralink" )

Kod:
<xf:comment> Nav Menu Yararli Link ikon ilavesi </xf:comment>
.p-navEl-link[data-nav-id="extralink"]::before {
font-family: FontAwesome !important;
content: '\f095' !important;
}
Kullandığım temadaki ikonların tümü "Material Design Icons". Eğer siz de kendinize uygun olan bir tane seçmek isterseniz, şu siteye bakabilirsiniz. Yukarıdaki kodda yer alan "'\f095" kısmını değiştiriyoruz.

Material Design Icons
Yeni Sekmede Nasıl Açtırabilirim Yani Forumdan Çıkmadan Yeni Sekmede Açmasını İstiyorum
 

eTiKeT™

value="{XenGenTr}"
Yönetici
XGT Master
Katılım
4 Ara 2016
Mesajlar
4,343
Web sitesi
xenforo.gen.tr
ID yanlış belirtmisiniz .p-navEl-link[data-nav-id="extralink"] extralink olan kısımı kendi ID belirtiniz.
 

Âlfonse

xFanatik
XGT 2 kullanıcı
Katılım
22 Nis 2017
Mesajlar
1,154
Belirtmek isterim ki css ile ikon eklerken font-family: olarak değil,

Less:
.m-faBase();
şeklinde eklemek daha mantıkı olur
 

netr0n

XenGenTr
Yönetici
XGT Admin
Katılım
6 Ara 2016
Mesajlar
3,275
Web sitesi
netron.web.tr
Aşağıdaki şekilde ekler misiniz?

Less:
.p-navEl-link[data-nav-id="extralink"]:before {
    .m-faBase();
    content: '\f095' !important;
}
 

ALBAT

Sabit kullanıcı
XGT 2 kullanıcı
Katılım
13 Haz 2019
Mesajlar
72
Web sitesi
xorbyte.org
Aşağıdaki şekilde ekler misiniz?

Less:
.p-navEl-link[data-nav-id="extralink"]:before {
    .m-faBase();
    content: '\f095' !important;
}
Screenshot Evet suan oldu fakat arasında 1tık boşluk olmasını istiyorum .
Ve iconumu materialdesignicons.com'dan aldıgım zaman farklı bir icon ile karşılaşıyorum.