Ikona FontAwesome w menu Joomla 4

[majan]

Witam,
Chciałem dodać prostą ikonę dla pozycji menu home w postaci domku zamiast słowa start/home/ czy innego. Szablon został stworzony w narzędziu TemplateToaster 8 i mimo, że na stronie używam już ikon z FontAwesome i wszystko mam dodane jak należy to nie mogę wymusić dodania ikony do menu dla pozycji home. Do menu w typie łącza dodałem odpowiedni wpis dla "klasa ikony linku" fa-solid fa-house i mimo to nie działa. Oczywiście z szablonem standardowym Joomla wszystko działa jak należy ale w tym zrobionym przez TT już nie.

Widzę, że konstrukcja menu wygląda nastepująco:
<li class="hkb_menu_items_parent dropdown">
<a class="hkb_menu_items_parent_link " href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>

Po zmianie klasy span na fa-solid fa-house wszystko działa ale nie wiem jak ja wymusić w kodzie lub w css aby się odnosiła do tej jednej pozycji w menu

<li class="hkb_menu_items_parent dropdown">
<a class="hkb_menu_items_parent_link " href="/index.php">
<span class="fa-solid fa-house"></span> O firmie
</a>
<hr class="horiz_separator">
</li>

www.hekabe.pl

dzięki za pomoc

/majan

[terra]

Po pierwsze Joomla obsługuje fontawesome 5 FREE, a po drugie zapis, którego używasz jest niepoprawny. Wpisz fas fa-home i powinno zadziałać fas to są właśnie ikony solid, poza tym Wyświetl tytuł menu, ustaw na NIE i będziesz miał samą ikonę. W przypadku innych szablonów, musisz zajrzeć do pliku CSS i sprawdzić, jak i czy w ogole, zostały zdefiniowane ikony fontawesome. Możliwe że w Twoim przypadku, brak ogolnej definicji dla list menu.

W standardowym szablonie, do zdefiniowania pozycji home używane są klasy level-1 default current active , stwórz własną klasę i dodaj ją w pozycji KLASA CSS ŁĄCZA.

jeśli zamienisz klasę menuchildicon (taką masz w pozyycji menu) na fas fa home, bez problemu pojawi się domek.

[majan]

Dodanie fas fa-home nie pomogło, nie wiem jak zmienić klasę menuchildicon na klasę fas fa home, bo w narzędziu nie można tej klasy zmienić, a w kodzie widzę jedynie taki zapis

<a <?php echo $class; ?> href="<?php echo $item->flink; ?>" <?php if (strpos($class, 'dropdown-toggle') !== false){echo''. $toggle .'="dropdown"';} ?> <?php echo $title; ?>><span class="menuchildicon"></span><?php echo $linktype; ?><?php if((!$justifychk && $m_pos == 'h_menu') || $m_pos == 'v_menu') {echo '</a>';}

Po ustawieniu Tytuł menu na nie, tytuł ciągle jest wyświetlany.

[terra]

Wejdź do pozycji menu, której chcesz nadać klasę, zakładka: typ łącza->Klasa CSS łącza, tutaj podajesz klasę. Możliwe że trzeba ją dodać ze spacją na początku.

[majan]

dodałem klase dla tej pozycji menu "_home_menu" pytanie jak ustawic teraz span na tą klase i gdzie w pliku index.php czy template.css?

[terra]

Nie musisz ustawiać span, ponieważ klasa którą zdefiniowałeś i dodałeś do pliku .css, powinna zacząć działać. Nie wiem co to za szablon, ale zmiany proponowałbym dodawać w pliku user.css, aby aktualizacja ich nie usunęła.

Jeśli chcesz używać span to np.

a span .nazwa_klasy {
   font-family:"Fontawesome 5 Free";
   content:"\f015";
}

[majan]

Niestety ale wciąż nie działa, i w span ciągle widzi menuchildicon :/

[terra]

to nadpisz klasę

.menuchildicon {  

 font-family:"Fontawesome 5 Free";
   content:"\f015";
}

chociaż chwilę, ty chcesz ukryć pozycję menu, a nie dodać ikonę, więc wróć do ukrycia tytułu menu, a potem wyczyść bufor strony. W sumie cześniej widziałem, że na stronie miałeś ikonę przy menu.

[majan]

Zachowuje sie jakby nie umiał zaczytać ikon, testuje to na zakładce o firmie

[terra]

Wygląda na to, że przyczyna problemów leży gdzie indziej, sprawdziłem źródło Twojej strony i masz tam bałagan z fontawesome. Wczytujesz 4 różne źródła, które muszą wywoływać problemy


Wyrzuć <script src="https://kit.fontawesome.com/c9144b442b.js" crossorigin="anonymous"></script>

Wyrzuć<link href="/media/vendor/fontawesome-free/css/fontawesome.min.css?5.15.4" rel="stylesheet" />

ZOSTAW <link href="/media/system/css/joomla-fontawesome.min.css" rel="stylesheet" />
Wyrzuć <link href="https://maxcdn.bootstrapcdn.com/font...wesome.min.css" rel="stylesheet" />