- Üyelik
- 2 Eylül 2019
- Mesajlar
- 1,023
- Web sitesi
- kogo.com.tr
- Cinsiyet
- Erkek ♂️
- İlişki Durumu
- İlişkim Var
- Burcu
- Kova ♒
- Ruh Hali
XenForo 2.3'de Font Awesome İkon Kullanımı
XenForo son güncellemesiyle birlikte Font Awesome ikonlarının kullanımı değiştirildi.
Yeni ve modern tarayıcılar ile uyumlu bir şekilde çalışabilmesi için güncellenen alt yapıya ayak uyduran Xenforo'da Font Awesome ikonları artık aşağıdakiler gibi kullanılmaktadır.
Xenforo'da Font Awesome dahili olarak geldiği için bazı ikonlar eklenmemiş olabilir veya isimleri değiştirilerek eklenmiş olabilir. Kontrol ederek kullanmanızda fayda var.
Dosya yolu olarak "siteadiniz . com/styles/fa/duotone/home.svg?v=6.6.0" örneğindeki gibi svg hallerine ulaşabilirsiniz.
HTML olarak kullanmak için:
Regular
HTML:
<xf:fa icon="far fa-house" />Duotone
HTML:
<xf:fa icon="fad fa-house" />Solid
HTML:
<xf:fa icon="fas fa-house" />Light
HTML:
<xf:fa icon="fal fa-house" />İkonun üzerine gelindiğinde açıklama eklemek için:
HTML:
<xf:fa icon="fad fa-home" title="İkon Açıklaması" />"fad fa-home" kısmını yukarıdaki örneklerden istediğiniz bir tanesini, "İkon Açıklaması" kısmını da farenin ikon üzerine geldiğinde görünmesini istediğiniz açıklamayı yazabilirsiniz.
İkona link vermek için:
HTML:
<a href="https://kogosociety.com"><xf:fa icon="fad fa-home" /></a>Vermek istediğiniz linki "https://kogosociety.com" kısmını düzenleyerek kullanabilirsiniz.
Ekstra olarak satır içerisinde css ile özelleştirmek için:
HTML:
<xf:fa style="color: #2577b1; font-size:40px; padding:5px; margin-right:10px;" icon="fad fa-home" />Eklediğiniz sayfada direk olarak satır içerisinde düzenleyip kendinize göre özelleştirebilirsiniz.
HTML Alternetif SVG kullanımı:
HTML:
<i class="fad fa-home" data-xf-init="icon"><svg></svg></i>Sitenize html olarak eklediğiniz harici sayfaların header veya body kısımlarında Font Awesome otomatik olarak eklenemeyebilir, bu ve buna benzer durumda svg formatını kullanabilirsiniz.
CSS olarak kullanmak için:
CSS:
.ikon:before
{
.m-faContent(@fa-var-home);
}Yukarıdaki örneklerde olduğu gibi "fa-var-duotone-home" , fa-var-solid-home" şeklinde varyasyonları kullanabilirsiniz.
İkonlara boyut vermek için:
CSS:
.node-icon i {
&:before {
.m-faContent(@fa-var-duotone-home, 1em);
}
svg {
display: none;
}
}ikonlara renk vermek için:
CSS:
.node-icon i {
&:before {
.m-faContent(@fa-var-duotone-home, 1em);
color: #ff0000;
}
svg {
display: none;
}
}CSS ile daha fazlada detaylandırıp temanıza uyumlu hale getirebilirsiniz.
LESS olarak kullanmak için:
CSS:
.ikon
{
&:before
{
.m-faContent(@fa-var-home);
}
}Yukarıda CSS ile verdiğim örnekler LESS'ler içinde geçerli, detaylandırmaları istediğiniz gibi verebilirsiniz.
