Jak dodać ikonki przy tym panelu ?

[Raben]

Witam tak jak w temacie mam problem bo nie wiem jak dodać tak aby znajdowaly sie jakies malutkie ikonki przy tych panelach na stronie glownej kategoriach.

[DawPi]

Nie ma takiej wbudowanej opcji niestety.

[Paweł]

Instrukcja:

 

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

 

Znajdź:

<li {{if $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.

Edytowane 19 Marca 2018 przez Paweł

[DawPi]

Godzinę temu, Paweł napisał:

Instrukcja:

Skopiowana ze źródła (które zawsze warto podać): https://www.pecetowicz.pl/jak-dodac-ikony-font-awesome-icons-do-menu-glownego-ips-community-4-t74586/

[Paweł]

4 godziny temu, DawPi napisał:

Skopiowana ze źródła (które zawsze warto podać): https://www.pecetowicz.pl/jak-dodac-ikony-font-awesome-icons-do-menu-glownego-ips-community-4-t74586/

 

dól tak ale pierwsze zmienione bo tam zle podane nie aktywne wiec żadne źródło

[Raben]

Dziekuje ! Panowie jesteście Super ! Temat do zamknięcia

[aXen]

8 hours ago, Paweł said:

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

Po co zmieniać kod HTML jeżeli można to zrobić tylko za pomocą CSS? 

[Raben]

Jak zrobić to za pomocą css ? To proszę jeszcze nie zamykajcie tematu

Edytowane 20 Marca 2018 przez Raben

[Paweł]

dodac samo to do custom.css

 

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

 

[Raben]

dobrze a jezeli dodam np Kategorie SKLEP i chce zeby była inna ikonka ? co mam zrobic np dopisuje i nie działa w głownej kategorii tak samo jak i czat ikonka sie nie zmienia gdy wpisze kod z unicode

/* Sklep */
.ipsNavBar_secondary > li[data-FontAwesome="Sklep"] > a::before {
content: "\f27a";
}

Edytowane 20 Marca 2018 przez Raben

[KaMILLOO]

Musisz posłużyć się tzw. encją HTML. Poszukaj na necie i wybierz odpowiednią ikonę, nasępnie skopiuj odpowiedni kod tej encji. Jest to zapis przykładowo \f27a, który masz u góry. Oczywiście w każdej encji zapis jest inny.

[Raben]

Dobra dzieki poradziłem sobie ps. Pracowałem na starszych wersjach i bylo inaczej ? pozdrawiam

[DawPi]

Problem ROZWIĄZANY. Jeśli są jakiekolwiek wątpliwości, pytania proszę o założenie nowego tematu.

Wszelkie uzasadnione reklamacje/pretensje/sugestie/rady przyjmuje ekipa forum.

[DawPi]

Łap, powstał właśnie mod do tego: https://invisioncommunity.com/files/file/8935-menunavigation-icons/