Jak dodać osobną ikonkę do każdej kategorii?

Witajcie, w tym poradniku pokaże wam jak dodać osobną ikonkę do każdej kategorii w mybb.
 
0. Będziemy korzystać z ikonek Font Awesome, więc jeśli nie macie ich jeszcze zaincludowanych do stylu zróbcie to teraz.
Przechodzimy do ACP > Style i szablony > Szablony > Wybieramy swój szablon > Niezgrupowane szablony > Headerinclude
Znajdujemy {$stylesheets} i dodajemy poniżej ten kod:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

1. Jeżeli mamy już wgrane ikonki teraz przechodzimy do ACP > Style i szablony > Szablony > Wybieramy swój szablon > Opis Działu >Forumbit_depth1_cat
Znajdujemy ten kod:

<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>

Zamieniamy na ten:

<div><div class="category_icon icon_{$forum['fid']}"></div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>

2. Następnie przechodzimy do CSS (ACP > Style i szablony > Style > Wybieramy swój styl > Global.css)
Na samym końcu dodajemy poniższy kod:

.category_icon {
padding:0 10px;
display: inline-block;
text-align:center;
}

.category_icon:before {
font-family: 'FontAwesome';
color: #fff; /* kolor ikonki */
  font-size: 15px; /* wielokosc ikonki */
  vertical-align:middle;
}

3. I teraz najważniejsze. Sprawdzamy id kategorii oraz id ikonki (unicode).
a) id kategorii, przechodzimy do ACP > Działy i posty > Działy
Wybieramy kategorię, do której chcemy dodać ikonkę. Identyfikator znajduje się w adresie:



W moim przypadku jest to kategoria o identyfikatorze 1.
b) id ikonki, przechodzimy na http://fortawesome.github.io/Font-Awesome/icons/ i wybieramy ikonkę pasującą do naszej kategorii.

W tym przypadku jest to f0c2.
4. Znowu przechodzimy do CSS (ACP > Style i szablony > Style > Wybieramy swój styl > Global.css)
Nasze id działu to 1, a ikonki to \f0c2 (Backslash nie jest błędem tylko tak oznacza się unicode w css).
Dodajemy na końcu taki kod, zauważcie gdzie umieszczone jest id działu oraz unicode ikonki.

.icon_1:before
{
content:'\f0c2';
}

Za każdym razem gdy chcemy dodać nową ikonkę powtarzamy pkt. 3 oraz 4.
Wygląda to tak:

Oczywiście można to wystylizować. 

Jeśli zauważycie jakiś błąd proszę o kontakt.  

 
Autor: Krugerz.

ficus napisał 14.12.2016, 11:33:
Poradnik zostaje przeniesiony do archiwum ze względu na wygasłe screeny.

Screeny nie działają

DeadlyGlobe71: Działają - masz.

Screen nr. 1:


Screen nr. 2:


Screen nr. 3: