Font Awesome zamiast obrazkowych ikon działu

bartosh

Administrator

12

50

Autor wątku

#1

01 Lis, 13:47

Poradnik oparty na stylu domyślnym - w każdym innym przypadku wygląda to podobnie lub tak samo

Jeżeli chcesz zamienić w swoim stylu obrazki działów na ikony "Font Awesome", ten poradnik jest dla Ciebie

Zaloguj się do ACP na swoim forum i przejdź: Style i szablony -> Szablony -> wybierz swój styl -> Niezgrupowane szablony -> headerinclude a następnie po

Kod:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.js?ver=1820"></script>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/jquery.plugins.min.js?ver=1820"></script>

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1820"></script>

wklej poniższy kod:

Kod:
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.0.0/css/all.css">

Zapisz i wróć do listy.

Następnie przejdź do zakładki: Style -> wybierz swój szablon -> global.css - Edytuj CSS: tryb zaawansowany

Znajdź:

Kod:
.forum_status {

    height: 30px;

    width: 30px;

    background: url(images/forum_icon_sprite.png) no-repeat 0 0;

    display: inline-block;

}

i zamień na:

Kod:
.forum_status {

    font-family: 'Font Awesome 6 Pro';

        font-size: 36px;

    display: inline-block;

}

Font-size - możemy zmienić na inny w zależności od naszych potrzeb,
font-weight - możemy dopisać, określając "grubość" naszych nowych ikon, np. font-weight:500;

Następnie znajdź:

Kod:
.forum_on {

    background-position: 0 0;

}

i zamień na:

Kod:
.forum_on {

    color: #fff;

}

#fff - możemy zmienić na kolor, który nam się podoba.
Podobnie robimy i klasami:

.forum_on - dział zawiera nowe posty
.forum_off - dział nie zawiera nowych postów
.forum_offclose - dział zamknięty
.forum_offlink - dział jako link

gdzie background-position: zamieniamy na color: po czym dodajemy kolor jaki nam pasuje.

Następnie dopisujemy nową linię:

Kod:
.forum_on:before, .forum_off:before {

content: '\f00c';

}

Gdzie:

f00c - to kod ikony font awesome, który znajdziemy wchodząc na stronę: https://fontawesome.com/search gdzie wyszukujemy ikonę którą jesteśmy zainteresowani - po czym klikamy na nią i w prawym górnym rogu znajduje się "Unicode" który należy skopiować.

Font Awesome

Podobnie robimy dla działu zamkniętego i oznaczonego jako link, czyli dopisujemy:

Kod:
.forum_offclose:before { 

content: '\unikod';

}

.forum_offlink:before {

content:'\unikod';

}

Gdzie "unikod" zmieniamy na unikod ikony znalezionej na stronie https://fontawesome.com/search

Mam nadzieję, że poradnik napisany jest przejrzyście, a jeżeli nie to proszę o pytania

Ten post był ostatnio modyfikowany: 12 Lis, 14:38 przez bartosh.

https://cs-2.pl

SHOX

Junior Member

0

2

#2

01 Lis, 18:30

Bardzo dobry poradnik przyda się na przyszłość 😉

edges

Junior Member

0

3

#3

14 Lis, 22:41

Bardzo fajny poradnik