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
.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:

<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:
// Kategori id=4 için ikon ekle
.block--category.block--category4 .block-header:before {
    .m-faIcon(@fa-var-sparkles);
}
Duotone:

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

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

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

.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:
.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:
.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:
.label.label--lightGreen:before {
    .m-faIcon(@fa-var-flower-tulip);
}
Metnin sonuna:

.label.label--lightGreen:after {
    .m-faIcon(@fa-var-flower-daffodil);
}
Hem öncesine hem sonrasına:

.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:
[data-nav-id="forums"]:before {
    .m-faIcon(@fa-var-comments);
    margin-right: 5px;
}
2. Başlık sonrasına ikon eklemek

[data-nav-id="forums"]:after {
    .m-faIcon(@fa-var-comments);
    margin-left: 5px;
}
3. İkonu başlığın yerine kullanmak (ifadeyle)

{icon:far::sparkles}        // Regular
{icon:fas::sparkles}        // Solid
{icon:fad::sparkles}        // Duotone
Renkli ikon için:

<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:
<xf:fa icon="fa-sparkles" aria-hidden="true" />
Solid (fas):

<xf:fa icon="fas fa-sparkles" aria-hidden="true" />
Duotone (fad):

<xf:fa icon="fad fa-sparkles" aria-hidden="true" />
Light (fal): 

<xf:fa icon="fal fa-sparkles" aria-hidden="true" />
Bağlantı (link) içinde ikon: 

<a href="https://example.com/page">
    <xf:fa icon="fa-sparkles" aria-hidden="true" />
</a>
Renk, boyut, boşluk gibi stillerle: 

<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:

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