By_Nimetullah
- 10 Şub 2023
- 1,718 Mesaj
Font Awesome (veya benzeri) ikonları kullanabileceğiniz iki ana durum vardır:
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:
Bu durumda ikonu doğrudan bir şablon veya HTML içinde gösterirsiniz. Kullanım şekli şöyledir:
Kategori düğümüne ikon ekleme
extra.less içinde, kategori ID’sine göre özelleştirilmiş örnek:
CSS:
Duotone:
Solid:
Light:
Ek stil:
CSS:
CSS:
Metnin önüne:
Hem öncesine hem sonrasına:
1. Başlık öncesine ikon eklemek
Örnek: navigation id = forums
CSS:
2. Başlık sonrasına ikon eklemek
3. İkonu başlığın yerine kullanmak (ifadeyle)
Renkli ikon için:
Yalnızca ikon:
Solid (fas):
Duotone (fad):
Light (fal):
Renk, boyut, boşluk gibi stillerle:
Alternatif olarak CSS class tanımlayarak da kullanabilirsiniz:
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:
Kod:
.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); // light2. 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:
Kod:
<xf:fa icon="fa-icon-name" aria-hidden="true" />Örnekler
extra.less içinde, kategori ID’sine göre özelleştirilmiş örnek:
CSS:
Kod:
// Kategori id=4 için ikon ekle
.block--category.block--category4 .block-header:before {
.m-faIcon(@fa-var-sparkles);
}
Kod:
.block--category.block--category4 .block-header:before {
.m-faIcon(@fa-var-duotone-sparkles);
}
Kod:
.block--category.block--category4 .block-header:before {
.m-faIcon(@fa-var-solid-sparkles);
}
Kod:
.block--category.block--category4 .block-header:before {
.m-faIcon(@fa-var-light-sparkles);
}
Kod:
.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:
Kod:
.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:
Kod:
.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:
Kod:
.label.label--lightGreen:before {
.m-faIcon(@fa-var-flower-tulip);
}
Metnin sonuna:
[code]
.label.label--lightGreen:after {
.m-faIcon(@fa-var-flower-daffodil);
}
Kod:
.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:
Kod:
[data-nav-id="forums"]:before {
.m-faIcon(@fa-var-comments);
margin-right: 5px;
}
Kod:
[data-nav-id="forums"]:after {
.m-faIcon(@fa-var-comments);
margin-left: 5px;
}
Kod:
{icon:far::sparkles} // Regular
{icon:fas::sparkles} // Solid
{icon:fad::sparkles} // Duotone
Kod:
<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:
Kod:
<xf:fa icon="fa-sparkles" aria-hidden="true" />
Kod:
<xf:fa icon="fas fa-sparkles" aria-hidden="true" />
Kod:
<xf:fa icon="fad fa-sparkles" aria-hidden="true" />
Kod:
<xf:fa icon="fal fa-sparkles" aria-hidden="true" />
Bağlantı (link) içinde ikon:
[code]
<a href="https://example.com/page">
<xf:fa icon="fa-sparkles" aria-hidden="true" />
</a>
Kod:
<xf:fa style="color:orange;font-size:22px;margin-left:5px;" icon="fad fa-palette" aria-hidden="true" />
Kod:
<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true" />
