• Konu İçeriğini Görebilmek İçin Lütfen Üye Olun. Aksi Takdirde İçeriği Göremezsiniz.

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

[ZF] Konu Bilgileri

Konu Hakkında Merhaba, tarihinde XenForo kategorisinde x tarafından oluşturulan Xenforo'da Kategori İconları İçin Resim Yerine FontAwesome iconu başlıklı konuyu okuyorsunuz. Bu konu şimdiye dek 288 kez görüntülenmiş, 0 yorum ve 0 tepki puanı almıştır...
Kategori Adı XenForo
Konu Başlığı Xenforo'da Kategori İconları İçin Resim Yerine FontAwesome iconu
Konbuyu başlatan x
Başlangıç tarihi
Cevaplar
Görüntüleme
İlk mesaj tepki puanı
Son Mesaj Yazan x

x

Üye
Katılım
30 Ara 2022
Mesajlar
341
Tepkime puanı
31
Puanları
28

İtibar:

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

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