Üst

Teknik Kullanım Xenforo 2.3’Te Font Awesome Nasıl Kullanılır?

1746302559806.webp
​
Font Awesome (veya benzeri) ikonları kullanabileceğiniz iki ana durum vardır:

1. Pseudo (öncesi/sonrası) öğeleri ile kullanma​

Bu durumda, CSS kodu aracılığıyla bir metnin (örneğin, bir kategori başlığı, ön ek veya gezinme öğesi) öncesinde veya sonrasında bir ikon görünmesini sağlarsınız. Bu genellikle extra.less şablonuna CSS kodu eklenerek yapılır.

Pseudo öğeleri ile CSS kullanımında syntax:

Less: 
.m-faIcon(@fa-var-icon-name); // regular

.m-faIcon(@fa-var-duotone-icon-name); // duotone

.m-faIcon(@fa-var-solid-icon-name); // solid

.m-faIcon(@fa-var-light-icon-name); // light

2. Doğrudan bir şablonda (template içinde) kullanma​

Bu durumda ikonu doğrudan bir şablon veya HTML içinde gösterirsiniz. Kullanım şekli şöyledir:

HTML: 
<xf:fa icon="fa-icon-name" aria-hidden="true" />

Örnekler​

Kategori düğümüne ikon ekleme​


extra.less içinde, kategori ID’sine göre özelleştirilmiş örnek:

CSS:

Less: 
// Kategori id=4 için ikon ekle
.block--category.block--category4 .block-header:before {
    .m-faIcon(@fa-var-sparkles);
}

Duotone:

Less: 
.block--category.block--category4 .block-header:before {
    .m-faIcon(@fa-var-duotone-sparkles);
}

Solid:

Less: 
.block--category.block--category4 .block-header:before {
    .m-faIcon(@fa-var-solid-sparkles);
}

Light:

Less: 
.block--category.block--category4 .block-header:before {
    .m-faIcon(@fa-var-light-sparkles);
}

Ek stil:

Less: 
.block--category.block--category4 .block-header:before {
    .m-faIcon(@fa-var-sparkles);
    color: red;
    font-size: 36px;
}


Varsayılan düğüm ikonunu değiştirme​


CSS:

Less: 
.node .node-icon i {
    &:before {
        .m-faIcon(@fa-var-coffee-pot);
        width: 100%;
    }

    svg {
        display: none;
    }
}

Belirli bir düğümün ikonunu değiştirme (örnek: id=8)​


CSS:

Less: 
.node.node--id8 .node-icon i {
    &::before {
        .m-faIcon(@fa-var-bullhorn);
    }

    svg {
        display: none;
    }
}

Konu ön ekine (thread prefix) ikon ekleme​


Metnin önüne:

Less: 
.label.label--lightGreen:before {
    .m-faIcon(@fa-var-flower-tulip);
}

Metnin sonuna:

Less: 
.label.label--lightGreen:after {
    .m-faIcon(@fa-var-flower-daffodil);
}

Hem öncesine hem sonrasına:

Less: 
.label.label--lightGreen {
    &:before {
        .m-faIcon(@fa-var-flower-tulip);
    }
    &:after {
        .m-faIcon(@fa-var-flower-daffodil);
    }
}


Navigasyonda ikonlar​


1. Başlık öncesine ikon eklemek

Örnek: navigation id = forums

CSS:

Less: 
[data-nav-id="forums"]:before {
    .m-faIcon(@fa-var-comments);
    margin-right: 5px;
}

2. Başlık sonrasına ikon eklemek

Less: 
[data-nav-id="forums"]:after {
    .m-faIcon(@fa-var-comments);
    margin-left: 5px;
}

3. İkonu başlığın yerine kullanmak (ifadeyle)

HTML: 
{icon:far::sparkles}        // Regular 
{icon:fas::sparkles}        // Solid 
{icon:fad::sparkles}        // Duotone

Renkli ikon için:

HTML: 
<span style="color:yellow">{icon:far::sparkles}</span>

Kendi oluşturduğunuz gezinme öğelerinde bu kodu doğrudan "Başlık" alanına ekleyebilirsiniz.


Şablonlara ikon eklemek​


Yalnızca ikon:

HTML: 
<xf:fa icon="fa-sparkles" aria-hidden="true" />

Solid (fas):

HTML: 
<xf:fa icon="fas fa-sparkles" aria-hidden="true" />

Duotone (fad):

HTML: 
<xf:fa icon="fad fa-sparkles" aria-hidden="true" />

Light (fal):

HTML: 
<xf:fa icon="fal fa-sparkles" aria-hidden="true" />

Bağlantı (link) içinde ikon:

HTML: 
<a href="https://example.com/page">
    <xf:fa icon="fa-sparkles" aria-hidden="true" />
</a>

Renk, boyut, boşluk gibi stillerle:

HTML: 
<xf:fa style="color:orange;font-size:22px;margin-left:5px;" icon="fad fa-palette" aria-hidden="true" />

Alternatif olarak CSS class tanımlayarak da kullanabilirsiniz:

HTML: 
<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true" />
 
Genişletmek için tıkla ...
Bu makaleye türkçe çevirmeniz çok iyi xenforoda görmüştüm ama böyle daha anlaşılır hocam teşekkürler
 
Cevap yazmak için giriş yap yada kayıt ol.
  • Ap Yazılım

    Konu '[Ap Yazılım] Kullanıcı Bilgileri'

    Merhaba değerli üyelerimiz. Yeni bir eklenti kodlamaktayım fikirlerinizi almak istedim. Daha çok webmaster forumlarında kullanılacak bir eklenti. Neler eklenmeli neler olmalı düşünceleriniz önemli. Şuan beta olarak formumuzda aktif durumda kullanıcı profilnize bakarasanız bunu göre bilirsiniz
  • Ap Yazılım

    Konu 'Xenforo 2.3’Te Font Awesome Nasıl Kullanılır?'

    Font Awesome (veya benzeri) ikonları kullanabileceğiniz iki ana durum vardır: 1. Pseudo (öncesi/sonrası) öğeleri ile kullanma Bu durumda, CSS kodu aracılığıyla bir metnin (örneğin, bir kategori başlığı, ön ek veya gezinme öğesi) öncesinde veya sonrasında bir ikon görünmesini sağlarsınız. Bu genellikle extra.less şablonuna CSS kodu eklenerek yapılır. Pseudo öğeleri ile CSS kullanımında syntax: .m-faIcon(@fa-var-icon-name); // regular .m-faIcon(@fa-var-duotone-icon-name); // duotone...
  • Ap Yazılım

    Konu 'Aramıza Hoş Geldiniz'

    Merhaba arkadaşlar, aramıza hoş geldiniz! Sizleri burada görmekten büyük mutluluk duyuyoruz. Paylaşımın, bilginin ve dostluğun adresine adım attınız. Forumumuzda keyifli vakit geçirmenizi dileriz. Sorularınızı sormaktan, fikirlerinizi paylaşmaktan çekinmeyin. Hep birlikte büyüyüp gelişeceğimiz güzel bir topluluk olalım!
  • E

    Konu 'Xenforo Google İndex Sorunu'

    Bu kategorinin ilk konusu benden olsun. Genel olarak index problemi herkeste var. Ancak XF forumlar sanki daha fazla yaşıyor gibi. Bunu artık herkes kabul ediyor. Nede 2-3 ayı bulan süreler oluyor? wordpress 3 günde index alırken biz neden 3 ay bekliyoruz. Bir de kendi özelimizde bir soru sormak istiyorum. xenwp.com den belki önceki tarihlerde yayına başlayan bir forumum var. XenWp geçenlerde index almaya başladı maşallah hemen. Ama benim forumum aylardır sadece anasayfa index aldı başka...
  • Ap Yazılım

    Konu '[Ap Yazılım] Harici Bağlantı Yönlendirici'

    Ap Yazılım Kullanıcımız yeni bir kaynak oluşturdu: [Ap Yazılım] Harici Bağlantı Yönlendirici - Eklenti, kullanıcıları dış sitelere yönlendirmeden önce uyarı sayfası oluşturmanıza olanak tanır. Bu kaynak hakkında daha fazla bilgi ...
  • XenForo® Sistem Gereksinimleri: PHP, MySQL Test Aracı ile Uyum Kontrolü (2025)

    Kaynak 'XenForo® Sistem Gereksinimleri: PHP, MySQL Test Aracı ile Uyum Kontrolü (2025)'

    XenForo® forum yazılımını kurmadan önce, sunucunuzun gerekli sistem gereksinimlerini karşılayıp karşılamadığını kontrol etmek büyük önem taşır. PHP sürümü, MySQL desteği, gerekli PHP eklentileri gibi kriterler kurulumun sorunsuz ilerlemesi için kritik rol oynar. Bu işlem için geliştirilen xenwp.php adlı küçük bir test dosyası sayesinde, ana dizine dosyayı yükleyip site.com/xenwp.php adresine giderek sunucu uyumluluğunuzu hızlıca görebilirsiniz. Bu yöntem, XenForo® kurulumuna başlamadan önce...
  • [Ap Yazılım] Harici Bağlantı Yönlendirici

    Kaynak '[Ap Yazılım] Harici Bağlantı Yönlendirici'

    📌 [Ap Yazılım] Harici Bağlantı Yönlendirici📌 Bu eklentiyle kullanıcılarınızı doğrudan dış sitelere göndermek yerine, önce sizin belirlediğiniz bir sayfaya yönlendirin. Böylece hem güvenliği artırır hem de yönlendirme sürecini kontrol altına alırsınız. 🔥 Öne Çıkan Özellikler: ✅ Güvenli Yönlendirme – Harici linklere gitmeden önce kullanıcıyı bilgilendiren ara sayfa. ✅ Profesyonel Görünüm – Forumunuza kurumsal bir hava katar. ✅ Tamamen Responsive – Mobil, tablet ve masaüstü cihazlarla uyumlu...
  • [Ap Yazılım] Kullanıcı Bilgileri

    Kaynak '[Ap Yazılım] Kullanıcı Bilgileri'

    📌 [Ap Yazılım] Kullanıcı Bilgileri XenForo forumlarınıza değer katacak yepyeni ve tamamen ücretsiz bir eklenti ile karşınızdayız! [Ap Yazılım] Kullanıcı Bilgileri Eklentisi, kullanıcı profil sayfalarına ekstra ve özelleştirilebilir bilgi alanları eklemenizi sağlar. Bu sayede hem kullanıcılarınızı daha yakından tanıyabilir hem de forumunuza daha dinamik ve kişisel bir atmosfer kazandırabilirsiniz. 🔥 Öne Çıkan Özellikler ✅ Ekstra Bilgi Alanları Kullanıcı profillerine yaş, konum, meslek...
  • [Ap Yazilim] Mini Duyuru Blokları

    Kaynak '[Ap Yazilim] Mini Duyuru Blokları'

    [Ap Yazılım] Mini Duyuru Blokları eklentisi, XenForo platformunuza aynı anda 3 adet mini duyuru bloğu ekleme imkânı sunar. Bu özellik sayesinde birden fazla duyuruyu kolayca yapabilir ve kullanıcılarınıza etkili bir şekilde iletebilirsiniz. Yönetici panelinden tamamen özelleştirilebilir yapısı sayesinde duyuru alanlarınızı dilediğiniz gibi düzenleyebilirsiniz. Duyuru metini değişimi : AdminCP >> Kurlumlar >> XF Seçenekleri >> [Ap Yazilim] Mini Duyuru Blokları Görsel düzenleme : AdminCP >>...
  • [Ap Yazılım] Rota Filtreleri

    Kaynak '[Ap Yazılım] Rota Filtreleri'

    Bu eklenti, XenForo forumunuzdaki URL’leri SEO uyumlu ve kullanıcı dostu hale getirerek daha anlaşılır ve Türkçeye uygun bir yapıya dönüştürür. Örneğin: ❌ account-confirmation/ ➡️ ✅ hesap-onay/ Böylece forum URL’leriniz daha profesyonel, kısa ve anlaşılır olur! 100+ farklı URL’yi otomatik olarak Türkçeye çevirerek forumunuzu daha profesyonel, kısa ve anlaşılır hale getirir! ✅ Türkçe Dostu URL’ler: İngilizce URL’leri otomatik olarak Türkçeye çevirir. 🔍 SEO Optimizasyonu: Arama...
  • XenForo 2.3.6: Türkçe 🇹🇷 dil yaması, dil paketi

    Kaynak 'XenForo 2.3.6: Türkçe 🇹🇷 dil yaması, dil paketi'

    XenForo 2.3.6: Türkçe 🇹🇷 dil yaması, dil paketi Bu XML dosyası ile İngilizce içerikli forum yazılımınızı Türkçe diline çevirebilirsiniz. Dil yamasını yüklemeden önce aşağıdaki uyarılarımızı dikkate alırsanız seviniriz. Eğer hali hazırda forumunuz var ve bir Tükçe yama kurulu ise, indireceğiniz bu XenForo Türkçe yama XML dosyasını kurulu olan Türkçe yamanızın üstüne yazdırarak yükselte bilirsiniz. XML dosyası kesinlikle XenWp dışında harici bağlantılar eklenmemiştir. Admin paneline eklenen...
  • [Ap Yazılım] Kullanıcı Paneli

    Kaynak '[Ap Yazılım] Kullanıcı Paneli'

    📌 [Ap Yazılım] Kullanıcı Paneli – Şık ve İşlevsel Kontrol Paneli! 📌 Bu eklenti ile kullanıcılar ve ziyaretçiler için modern, şık ve işlevsel bir kontrol paneli oluşturabilirsiniz! Kullanıcı dostu arayüzü sayesinde forum üyeleriniz, hesaplarını kolayca yönetebilir ve önemli bilgilere hızla erişebilir. 🔥 Öne Çıkan Özellikler: ✅ Modern Tasarım – Kullanıcı panelinizi daha estetik ve düzenli hale getirir. ✅ Hızlı ve Kullanışlı – Kullanıcıların hesaplarına dair bilgilere kolayca ulaşmasını...
  • [Ap Yazılım] Reklam Alanları

    Ürün '[Ap Yazılım] Reklam Alanları'

    [Ap Yazılım] Reklam Alanları – Modrn Reklamlarla Farkınızı ortaya Koyun! XenForo forumunuza entegre edebileceğiniz [Ap Yazılım] Reklam Alanları eklentisi ile profesyonel reklam yönetimi artık çok daha kolay! Forumunuzu ziyaret eden kullanıcıları en iyi şekilde hedefleyerek reklam gelirlerinizi artırın. 💡 Kimler İçin İdeal? ✅ Forum Sahipleri – Reklam gelirlerini artırmak isteyen herkes için mükemmel bir çözümdür. ✅ Yöneticiler – Kullanıcı deneyimini bozmadan reklam entegrasyonu sağlamak...
  • [Ap Yazılım] Çözüldü Öneki

    Ürün '[Ap Yazılım] Çözüldü Öneki'

    ✅ Forum Düzeni Sağlar: Yanıtlanan ve çözüme kavuşan soruların düzenli bir şekilde önek eklenmesini sağlar, forumda temizlik ve düzeni korur. 🚀 Kolay Kurulum ve Kullanım: Eklenti, her seviyeden kullanıcının rahatlıkla kurup kullanabileceği basit bir yapıya sahiptir. Sadece birkaç adımda aktif hale gelir! 💡 Kimler İçin İdeal? Bu eklenti, özellikle teknik destek veya soru-cevap odaklı forumlarda yer alan yöneticiler ve forum sahipleri için ideal. Forumda çözülmüş konuların takibini...
  • [Ap Yazılım] Kategori Arama

    Ürün '[Ap Yazılım] Kategori Arama'

    📂 Kategori Başlıklarında Akıllı Arama Artık doğru kategoriyi bulmak için dakikalarca uğraşmanıza gerek yok! Arama özelliği sayesinde, kategori başlıklarını hızlıca filtreleyebilir ve tam ihtiyacınız olan kategoriyi kolayca bulabilirsiniz. ✅ Doğru İçerik, Doğru Kategori İçeriklerin yanlış kategorilere eklenmesini önleyerek, forum düzenini ve kullanıcı deneyimini iyileştirin. 🚀 Hızlı ve Kullanıcı Dostu Kolay arayüzüyle herkesin rahatlıkla kullanabileceği bir çözüm sunar. 💡 Kimler İçin...
Tüm öne çıkan içeriği görüntüle

Konuyu toplam 0 üye okuyor. (0 Kayıtlı üye ve 0 Misafir)

Geri