Neler yeni
Türkiye'nin En Güncel Forum Sitesi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı yada giriş yapmalısınız. Forum üye olmak tamamen ücretsizdir.

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

Pisadam

Dalından düşen yaprak rüzgarın oyuncağı olur.
CEO
Konum
İstanbul
  • Üyelik Tarihi
    2 Nis 2008
  • Mesajlar
    11,036
  • MFC Puanı
    19,237
  • MFC Seviyesi

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.

xenforo kategorilere fontawesome iconu kullanmak.png

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:
<a href=”{{ link('forums', $node) }}” class=”subNodeLink subNodeLink–forum {{ $extras.hasNew ? 'subNodeLink–unread' : '' }}”>{$node.title}</a>
2- Aşağıdaki ile değiştirin
HTML:
<a href=”{{ link('forums', $node) }}” class=”fa-{$node.node_id} subNodeLink subNodeLink–forum {{ $extras.hasNew ? 'subNodeLink–unread' : '' }}”>{$node.title}</a>
3- Yine aynı şablonda yani node_list_forum şablonunda aşağıdaki kodu arayın
HTML:
<span class=”node-icon” aria-hidden=”true”><i></i></span>
4- Aşağıdaki ile değiştirin
HTML:
<span class=”node-icon” aria-hidden=”true”><i class=”fa-{$node.node_id}”></i></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:
.fa-1490::before {
    content: "\f09a" !important;
    color: #4064AD !important;
    font-size: 38px !important;
}
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.

xenforo kategorilere fontawesome iconu kullanmak2.png


xenforo kategorilere fontawesome iconu kullanmak3.png

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