Foruma hoş geldin, Ziyaretçi

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

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!

Bilgilendirme Navigasyon Yöneticisine Yeni Menu ve Ikon İlavesi

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

  • Nav_1.jpg
    Nav_1.jpg
    161.8 KB · Görüntüleme: 554
  • Nav_2.jpg
    Nav_2.jpg
    70.1 KB · Görüntüleme: 301
  • Nav_3.jpg
    Nav_3.jpg
    95 KB · Görüntüleme: 273
  • Nav_4.jpg
    Nav_4.jpg
    101.5 KB · Görüntüleme: 255
Son düzenleme:

TheHypnosis

xFanatik
XGT Onaylı
Kullanıcı
Katılım
6 Haz 2019
Mesajlar
288
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="{XGT}"
Yönetici
XGT Master
XGT Onaylı
Katılım
4 Ara 2016
Mesajlar
7,265
Web sitesi
xenforo.gen.tr
ID yanlış belirtmisiniz .p-navEl-link[data-nav-id="extralink"] extralink olan kısımı kendi ID belirtiniz.
 

mcv_js

xFanatik
XGT Onaylı
Kullanıcı
Katılım
22 Nis 2017
Mesajlar
1,250
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 Master
XGT Onaylı
Katılım
6 Ara 2016
Mesajlar
5,485
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

xFanatik
XGT Onaylı
Kullanıcı
Katılım
13 Haz 2019
Mesajlar
211
Web sitesi
partivo.net
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.
 

Forumdan daha fazla yararlanmak için giriş yapın yada üye olun!

Forumdan daha fazla yararlanmak için giriş yapın veya kayıt olun!

Kayıt ol

Forumda bir hesap oluşturmak tamamen ücretsizdir.

Şimdi kayıt ol
Giriş yap

Eğer bir hesabınız var ise lütfen giriş yapın

Giriş yap

Tema düzenleyici

Tema özelletirmeleri

Grafik arka planlar

Granit arka planlar