Xenforo'da Kategori İconları İçin Resim Yerine FontAwesome iconu Kullanmak

Xenforo forum sitenizde her kategoriye, foruma veya alt forumlara ayrı ayrı resim eklemek sayfa yükleme hızında size büyük bir problem yaratacaktır.
Bunun yerine FontAwesome iconu kullanmanız forum sitenizi hem daha şık gösterecek hemde daha hızlı bir siteye sahip olacaksınız.



Peki bunu nasıl yapabiliriz?

İlk olarak kullandığınız temada yapmanız gereken değişiklikler olacak bunları anlatayım;

1- Kullandığınız temanın node_list_forum şablonunda aşağıdakini bulun
HTML:
<span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span>”{{</span> <span>link('forums',</span> <span>$node)</span> <span>}}”</span> <span>class</span><span><span>=</span>”subNodeLink</span> <span>subNodeLink–forum</span> <span>{{</span> <span>$extras.hasNew</span> <span>?</span> <span>'subNodeLink–unread'</span> <span>:</span> <span>''</span> <span>}}”</span><span>&gt;</span></span>{$node.title}<span><span><span>&lt;/</span>a</span><span>&gt;</span></span>

2- Aşağıdaki ile değiştirin
HTML:
<span><span><span>&lt;</span>a</span> <span>href</span><span><span>=</span>”{{</span> <span>link('forums',</span> <span>$node)</span> <span>}}”</span> <span>class</span><span><span>=</span>”fa-{$node.node_id}</span> <span>subNodeLink</span> <span>subNodeLink–forum</span> <span>{{</span> <span>$extras.hasNew</span> <span>?</span> <span>'subNodeLink–unread'</span> <span>:</span> <span>''</span> <span>}}”</span><span>&gt;</span></span>{$node.title}<span><span><span>&lt;/</span>a</span><span>&gt;</span></span>

3- Yine aynı şablonda yani node_list_forum şablonunda aşağıdaki kodu arayın
HTML:
<span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span>”node-icon”</span> <span>aria-hidden</span><span><span>=</span>”true”</span><span>&gt;</span></span><span><span><span>&lt;</span>i</span><span>&gt;</span></span><span><span><span>&lt;/</span>i</span><span>&gt;</span></span><span><span><span>&lt;/</span>span</span><span>&gt;</span></span>

4- Aşağıdaki ile değiştirin
HTML:
<span><span><span>&lt;</span>span</span> <span>class</span><span><span>=</span>”node-icon”</span> <span>aria-hidden</span><span><span>=</span>”true”</span><span>&gt;</span></span><span><span><span>&lt;</span>i</span> <span>class</span><span><span>=</span>”fa-{$node.node_id}”</span><span>&gt;</span></span><span><span><span>&lt;/</span>i</span><span>&gt;</span></span><span><span><span>&lt;/</span>span</span><span>&gt;</span></span>

5- Son olarak işin birde CSS kısmı var. Aşağıdak kodu extra.less şablonuna ekleyin. Bunu her kategori/forum/alt forum için ayrı ayrı yapmalısınız.

CSS:
<span>.fa-1490::before</span> <span>{</span><br> <span>content</span><span>:</span> <span>"\f09a"</span> <span>!important</span><span>;</span><br> <span>color</span><span>:</span> #4064AD <span>!important</span><span>;</span><br> <span>font-size</span><span>:</span> 38px <span>!important</span><span>;</span><br><span>}</span>

Kısa Notlar:
- fa-1490'daki 1490 sizin forum id numaranızdır. Her forumun ayrı bir id numarası vardır. Aşağıdaki resimde id numarasını nasıl bulursunuz gösterdim.
- f09a kullanacağınız FontAwesome iconunun karşılığıdır. Aşağıdaki resimde bunu nasıl alacağınızı gösterdim.
- #4064AD - buda renk kodudur. Kullanacağınız iconun rengi bu şekilde değiştirebilirsiniz.
- 38px - Bu iconunuzun boyutunu belirler. Ben mesela 38px büyüklüğünde kullanıyorum. Bu sizde 40px de olabilir 70px de olabilir tamamen sizin tercihiniz.

CSS bilginiz varsa daha farklı görünümlerede koyabilirsiniz. Tamamen sizin bilginize kalmış bir durum.






Bu yazı farklı sitelerde ancak kaynak gösterilerek paylaşılabilir.