Jak zmienić obrazki działów na ikony Font-Awesome?

1 Implementacja Font-Awesome

 

Pomiń ten krok jeśli na swoim forum używasz już FA!

Przejdź na stronę https://fontawesome.com/start. Zostaniesz poproszony o podanie e-maila, na którego dostaniesz wiadomość z instrukcją. Potwierdź konto i podaj wymagane dane. Jeśli wszystko przejdzie poprawnie, dostaniesz wygenerowany kod (your kit's code). Skopiuj go.
   
ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Niezgrupowane szablony → headerinclude
Znajdź: {$stylesheets}, nad nim wklej skopiowany kod (your kit's code).

Może się zdarzyć, że nie znajdziesz tego szablonu w sekcji Niezgrupowane szablony, wtedy poszukaj w grupie  Nagłówek

2 Edycja szablonów - domyślna ikona

ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Opis działu →  forumbit_depth2_forum
Zamień: 

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

na:

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

Domyślnie (jeśli nie nadpiszesz w CSS ikonki danego działu) będzie wyświetlana ikona dymka - <i class="fas fa-comment"></i>. Możesz to zmienić tutaj.

ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Opis działu → forumbit_depth2_cat
Zamień:  

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

na:  

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

3 Edycja arkuszy CSS

ACP →  Style i szablony → NazwaTwojegoStylu → global.css
Zamień:

.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_offlock {
background-position: 0 -60px;
}

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

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";
}

4 Stworzenie arkusza CSS z faviconami

ACP → Style → Twój_styl → Nowy arkusz CSS

• Nazwa pliku: ficons.css (nazwa dowolna, powinna Ci mówić, że tu jest CSS od ikon działów)
  
• Dołączane do: Do wszystkich
  
• Wpisz podaną przeze mnie zawartość:
  

/*My Forum - dog icon*/
.ficons_2 i:before {
    content: "\f6d3";
}
/*My Forum2 - bell icon*/
.ficons_3 i:before {
   content: "\f0f3";
}

Aby znaleźć "numer działu", wejdź do ACP → Działy i posty → Dział, któremu zmieniasz ikonę → na pasku adresu (na końcu) po &fid= znajduje się pewna liczba, to właśnie ją trzeba wkleić po .ficons_ 

Aby zmienić podaną przeze mnie ikonę FA, przejdź na stronę https://fontawesome.com/icons pod nazwą wybranej przez Ciebie ikony znajduje się ciąg kilku znaków, skopiuj go, np. f209, wklej go po znaku \ w stworzonym chwilę temu arkuszu, w odpowiedniej klasie oczywiście

   

Do tej pory osiągneliśmy taki wygląd działów:
   

5 Zmiana ikon poddziałów

ACP →  Style i szablony → NazwaTwojegoStylu → global.css
Zamień:

.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_miniofflock {
background-position: 0 -20px;
}

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

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";
}

ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Opis działu →  forumbit_depth3_statusicon
Zamień:

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

na:

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

 

Domyślnie (jeśli nie nadpiszesz w CSS ikonki danego poddziału) będzie wyświetlana ikona strzałki w prawo - <i class="fas fa-arrow-right"></i>. Możesz to zmienić tutaj. Pomiń dalsze instrukcje jeśli chcesz, aby wszystkie subfora miały tą samą ikonkę. 

ACP → Style → NazwaTwojegoStylu→ ficons.css
Dopisz:

/*Test subforum - dog icon*/
.subicons_5 i:before {
    content: "\f6d3";
}

Efekt końcowy (bez dostosowywania ikon poddziałów):
   

Inspirowane https://community.mybb.com/thread-156711.html

Zaktualizowałem poradnik do najnowszego MyBB 1.8.14 (na tę chwilę) oraz Font Awesome 5.0.1.

Pod linkiem jest błąd 404 ale to tak przy okazji
Mam pytanie czy jest możliwe dodanie do istniejącego już na forum FA 4.7.0 FA 5.7.2 i do czasu podmiany używania obu wersji??
Łatwiej by mi to było robić krok po kroku bo sporo jest w moim szablonie tych ikon.

Pod linkiem jest błąd 404 ale to tak przy okazji
Mam pytanie czy jest możliwe dodanie do istniejącego już na forum FA 4.7.0 FA 5.7.2 i do czasu podmiany używania obu wersji??
Łatwiej by mi to było robić krok po kroku bo sporo jest w moim szablonie tych ikon.

https://fontawesome.com/start
I masz masz kod, który musisz wkleić

Bardziej mi chodziło o korzystanie z dwóch jednocześnie

w headerinclude nad {$stylesheets} mam:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

jak teraz dodam od wersji 5 to znika mi połowa ikon, a chciałem tego uniknąć, lepiej mi się coś podmienia jak to widzę.

Słaby poradnik, więcej wkurwu niż zabawy.

Na czystej instalacji mybb działa, przed chwilą przetestowałem. Na innych szablonach pewnie trzeba trochę pomyśleć ^_^.
W wolnej chwili poprawię krok 1. - implementację FA, bo jakiś czas temu to się akurat zmieniło.
Jeśli czegoś nie zrozumiałeś - śmiało, pytaj! Albo.. napisz własny (lepszy) poradnik, czemu by nie?

Aktualizacja 31.07.2019
Poprawa 1. kroku, screenów, domyślnych ikon, kodu szablonów do poddziałów.