Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

CzareK

Jak dodać ikony Font Awesome Icons do menu głównego? [IPS Community 4]

Promowane odpowiedzi

CzareK    4,490

ips4_menu_font_awesome_icons.png

 

Instrukcja:

 

ACP -> Wygląd -> Style i szablony -> Edytuj HTML i CSS -> W wyszukiwarkę wpisz navBarItems -> Kliknij w navBarItems

 

Znajdź:

<li {{if $item->active()}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}">

Zamień na:

<li {{if $item->active()}}class='ipsNavBar_active' data-active{{endif}} id='elNavSecondary_{$item->id}' data-role="navBarItem" data-navApp="{expression="mb_substr( get_class( $item ), 4, mb_strpos( get_class( $item ), '\\', 4 ) - 4 )"}" data-navExt="{expression="mb_substr( get_class( $item ), mb_strrpos( get_class( $item ), '\\' ) + 1 )"}" data-FontAwesome="{$item->title()}">

Kliknij przycisk Zapisz.

 

Następnie wejdź w zakładkę -> CSS -> custom -> custom.css i wklej:

/* Menu Font Awesome Icons */
.ipsNavBar_primary > ul > li > a::before, .ipsNavBar_secondary > li > a::before {
     /* Domyślna ikona */
  	 content: "\f0ca"; /* Numer Unicode ze strony Font Awesome Icons */
     display: inline-block;
     font-family: "FontAwesome";
     font-size: 14px;
     font-weight: normal;
     line-height: 1;
     margin-bottom: -2px;
     margin-right: 3px;
     opacity: 0.6;
}
/* Przeglądaj */
.ipsNavBar_primary > ul > li[data-FontAwesome="Przeglądaj"] > a::before {
     content: "\f0ca";
}
/* Fora */
.ipsNavBar_secondary > li[data-FontAwesome="Fora"] > a::before {
     content: "\f086";
}
/* Pliki */
.ipsNavBar_secondary > li[data-FontAwesome="Pliki"] > a::before {
     content: "\f019";
}
/* Kalendarz */
.ipsNavBar_secondary > li[data-FontAwesome="Kalendarz"] > a::before {
     content: "\f073";
}
/* Użytkownicy online */
.ipsNavBar_secondary > li[data-FontAwesome="Użytkownicy online"] > a::before {
     content: "\f0c0";
}
/* Załoga */
.ipsNavBar_secondary > li[data-FontAwesome="Załoga"] > a::before {
     content: "\f132";
}
/* Aktywność */
.ipsNavBar_primary > ul > li[data-FontAwesome="Aktywność"] > a::before {
     content: "\f0ac";
}
/* Cała aktywność */
.ipsNavBar_secondary > li[data-FontAwesome="Cała aktywność"] > a::before {
     content: "\f06e";
}
/* Moje kanały aktywności */
.ipsNavBar_secondary > li[data-FontAwesome="Moje kanały aktywności"] > a::before {
     content: "\f00e";
}
/* Nieprzeczytana zawartość */
.ipsNavBar_secondary > li[data-FontAwesome="Nieprzeczytana zawartość"] > a::before {
     content: "\f111";
}
/* Zawartość którą rozpocząłem */
.ipsNavBar_secondary > li[data-FontAwesome="Zawartość którą rozpocząłem"] > a::before {
     content: "\f005";
}
/* Szukaj */
.ipsNavBar_secondary > li[data-FontAwesome="Szukaj"] > a::before {
     content: "\f002";
}
/* Czat */
.ipsNavBar_secondary > li[data-FontAwesome="Czat"] > a::before {
     content: "\f1d7";
}
/* Galeria */
.ipsNavBar_secondary > li[data-FontAwesome="Galeria"] > a::before {
     content: "\f03e";
}
/* Blogi */
.ipsNavBar_secondary > li[data-FontAwesome="Blogi"] > a::before {
     content: "\f27a";
}

Kliknij przycisk Zapisz. Gotowe. Odśwież stronę i sprawdź rezultat.

 

ss1.png

 

ss2.png

  • Lubię to! 3

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

  • Podobna zawartość

    • Przez CzareK
      W tym poradniku pokażę Wam jak możemy dodać dowolną ikonkę przy wybranym przez nas dziale.
       
      Wchodzimy na oficjalną stronę Font Awesome i wybieramy ikonkę, którą chcemy dodać przy dziale. Ja przykładowo wybrałem fa-html5. Dla nas ważny jest numer, który podany jest przy "Unicode". W moim przypadku to f13b.
       

       
      Przechodzimy do ACP Wygląd Style i szablony Edytuj HTML i CSS Zakładka CSS custom custom.css
       

       

       

       
      Po przejściu do custom.css musimy dodać odpowiedni kod:
      [data-forumid="2"] .fa-comments:before { content: "\f13b"; } W data-forumid musimy podać ID naszego wybranego działu. W moim przypadku to ID: 2. Natomiast w content podajemy numer ikonki, który podany jest na stronie Font Awesome. W moim przypadku to f13b. Na końcu klikamy "Zapisz" i na tym kończymy.
       
      Aby dowiedzieć się jaki ID posiada nasz dział, należy najechać myszką na nazwę działu. Numer ID znajduje się w odnośniku.
       
      Przykładowy adres:
      webmasteruj.pl/forum/2-html-5/ Numer działu znajduje się zaraz po /
       
      Efekt końcowy:
       

       
    • Przez CzareK
       

       
      ACP Wygląd Style i szablony Edytuj HTML i CSS Zakładka CSS custom custom.css Wklej poniższy kod:
      [data-forumid="2"] .ipsDataItem_title > a { color: #556e53; /* Kolor "A Test Forum" */ } [data-forumid="2"] .ipsDataItem_subList > li:nth-child(1) a { color: #f87d09; /* Kolor "Test 1" */ } [data-forumid="2"] .ipsDataItem_subList > li:nth-child(3) a { color: #a9c52f; /* Kolor "Test 3" */ } .ipsDataItem_title > a:hover, .ipsDataItem_subList > li > a:hover { color: #ad1457 !important; } Kliknij przycisk Zapisz.
       
      W data-forumid dodajemy ID naszego wybranego działu. W moim przypadku to ID: 2.
      Aby dowiedzieć się jaki ID posiada nasz dział, należy najechać myszką na nazwę działu. Numer ID znajduje się w odnośniku.
       
      Przykładowy adres:
      webmasteruj.pl/forum/2-a-test-forum/ Numer działu znajduje się zaraz po /
      li:nth-child(1) W () podajemy numer subforum, któremu chcemy nadać wybrany kolor.
       
      Ważne!
      Kolory działają jedynie na stronie głównej.
       

    • Przez CzareK
      Przechodzimy do ACP System Pomoc Wsparcie techniczne Zaznaczamy "Coś nie działa poprawnie." Klikamy przycisk Kontynuuj Gotowe.
       

       

    • Przez SeNioR
      Autor: insp (forum.invisionize.pl)                    
      Spolszczone zostało:
      Core Blog (Blogi) Downloads (Pliki) Gallery (Galeria) Forums (Forum) Calendar (Kalendarz) Chat (Czat) Pages (Strony)  
      Najnowsza wersja:
      Polski_1.6.zip (Aktualizacja spolszczenia do wersji 4.1.7)
      Poprzednie wersje:
      Polski_1.5.zip
      Polski_1.4.zip
       
      Autor: @naXe              
      Spolszczone zostało:
      Core Forums (Forum) Chatbox  
      Poprzednie wersje:
      Polski (PL) 4.1.9.rar
      Najnowsza wersja:
      Polski (PL) 4.1.10.zip (Aktualizacja spolszczenia do wersji 4.1.10)
  • Ostatnie tematy

×