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

Założony przez Fyeem.

Chcesz zmienić standardowe ikony działów na obrazki z rodziny FontAwesome? Ten poradnik jest dla Ciebie!

1 Implementacja Font-Awesome


ACP → Style i szablony → Szablony → NazwaTwojegoSzablonu → Niezgrupowane szablony → headerinclude
Znajdź: {$stylesheets}, pod tym wklej kod, który znajdziesz na stronie FontAwesome.

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

   

2 Edycja szablonów - dodanie ikony FA


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-bomb"></i></div>


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-bomb"></i></div>

3 Edycja arkuszy CSS - dodanie ikony FA


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


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ść:
.ficons_2 i:before {
content: "\f13d"; /*ikona kotwicy*/
}


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ę FontAwesome - kliknij tutaj; 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 subforum_{$lightbulb['folder']} ajax_mark_read" id="mark_read_{$forum['fid']}"><i class="fas fa-bomb"></i></div>

Jest tak:
   

Inspirowane https://community.mybb.com/thread-156711.html
Moja oferta - pomoc (prywatna) przy tworzeniu i edycji forum MyBB.

Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
 
Zaktualizowałem poradnik do najnowszego MyBB 1.8.14 (na tę chwilę) oraz Font Awesome 5.0.1.
Moja oferta - pomoc (prywatna) przy tworzeniu i edycji forum MyBB.

Cytat:w pół dnia stałeś się lepszym pytonistą niż kawenanowo kiedykolwiek programisto :3 ~ Riess 13.11.2018 16:28
 
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.
(18.02.2019, 17:54)Bouli napisał(a): 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ę.



Użytkownicy przeglądający ten wątek:

1 gości