Własne ikony działów jako ikony Font Awesome. Poradnik MyBB.

Witam. W tym poradniku opiszę jak dodać własne ikony działów z wykorzystaniem ikonek Font Awesome w MyBB.

KROK PIERWSZY - IMPLEMENTACJA FONT AWESOME

Przejdź do PA --> Style i szablony  --> Szablony --> Twój szablon --> Niezgrupowane szablony  --> headerinclude.

Znajdź zmienną:

{$stylesheets}

Za zmienną wklej kod, który znajduje się na stronie Start | Font Awesome

Przykład:

{$stylesheets}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

KROK DRUGI - EDYCJA SZABLONÓW

Przejdź do PA --> Style i szablony --> Szablony --> Twój szablon --> Opis działu --> forumbit_depth2_forum.

Zamień z:

<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>

Zamień na:

<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read faicons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-server"></i></div>

Przejdź do PA --> Style i szablony --> Szablony   --> Twój szablon   --> Opis działu --> forumbit_depth2_cat.

Zamień z:

<span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span>

Zamień na:

<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read faicons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fas fa-server"></i></div>

KROK TRZECI - EDYCJA ARKUSZA STYLÓW

Przejdź do PA --> Style i szablony   --> Style --> Twój styl --> global.css.

Zamień z:

.forum_status {
	height: 30px;
	width: 30px;
	background: url(images/forum_icon_sprite.png) no-repeat 0 0;
	display: inline-block;
}

.forum_on {
	background-position: 0 0;
}

.forum_off {
	background-position: 0 -30px;
}

.forum_offclose {
	background-position: 0 -60px;
}

.forum_offlink {
	background-position: 0 -90px;
}

Zamień na:

.forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

KROK CZWARTY - TWORZENIE NOWEGO ARKUSZA STYLÓW

Przejdź do PA --> Style i szablony --> Style   --> Twój styl   --> Nowy arkusz CSS.

• Nazwa pliku (dowolna): faicons.css.
• Dołączane do: Do wszystkich.

Wklej poniższy kod CSS. Gdzie X to ID działu:

.faicons_X i:before {
	content: "\f233";
}

KROK PIĄTY - ZMIANA IKON PODDZIAŁÓW

Przejdź do PA --> Style i szablony --> Style --> Twój styl  --> global.css.

Zamień z:

.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
	background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
	background-position: 0 0;
}

.subforum_minioff {
	background-position: 0 -10px;
}

.subforum_minioffclose {
	background-position: 0 -20px;
}

.subforum_miniofflink {
	background-position: 0 -30px;
}

Zamień na:

.subforumicon {
height: 10px;
width: 10px;
display: inline-block;
 margin: 0 5px;
}

.subforum_minion {
color: #333;
}

.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink {
color: #333;
}

.subforum_minioff {
opacity: .4;
}

.subforum_miniofflock i:before {
content: "\f023";
}

.subforum_miniofflink i:before {
content: "\f0c1";
}

Przejdź do PA --> Style i szablony -->  Szablony   --> Twój szablon --> Opis działu  --> forumbit_depth3_statusicon.

Zamień z:

<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"></div>

Zamień na:

<div title="{$lightbulb['altonoff']}" class="subforumicon subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fas fa-server"></i></div>

KROK SZÓSTY - ODCZYTANIE IKONY FA ORAZ ID DZIAŁU

ID działu możesz odczytać poprzez wejście w dział i odczytanie z paska adresu strony:

http://localhost/mybb-1.8/forumdisplay.php?fid=2

Cyfra po fid (na samym końcu) oznacza ID działu.

Ikonę FA odczytujesz na zaznaczonym czerwono polu:

EFEKT KOŃCOWY

Poradnik jest nadal aktualny, więc musiałeś zrobić coś źle.

@Ace Baby, Pokaż swój cały forumbit_depth3_statusicon.