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 (https://www.hekabe.pl/media/vendor/fontawesome-free/css/fontawesome.min.css?5.15.4)" rel="stylesheet" />

ZOSTAW <link href="/media/system/css/joomla-fontawesome.min.css (https://www.hekabe.pl/media/system/css/joomla-fontawesome.min.css)" rel="stylesheet" />
Wyrzuć <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

[majan]

Nie wiem gdzie to jest zakodowane, bo na pewno nie w index.php
<link href="https://maxcdn.bootstrapcdn.com/font...wesome.min.css (https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css)" rel="stylesheet" />

Może masz rację, że to powoduje problemy ale skasowałem dwa z 3 i dalej nic

[majan]

Na drugiej stronie mam dokładnie tą samą sytuację :/
practice.com.pl
Nie mam pojęcia czemu ikona się nie wyświetla. Oszaleje :/

[terra]

Tak się kończy robienie szablonów w kreatorach :\ . Nie wiem o którym pliku index mówisz, w katalogu głównym czy template. Z tego co widzę to ten kreator, "pcha" wszędzie javaScript. Nie jest to szablon zrobiony "zgodnie ze sztuką". Mogę polecić tylko wyrzucenie tego ***** . Najprawdopodobniej szablon jest kompilowany przy tworzeniu i nie reaguje na oczywiste zmiany.

Dałes się ponieść reklamie :) To nie jest kompatybilne z Joomla 4 i nie ma dobrych wyników SEO.
Sprawdziłem pierwszą i tę drugą stronę i jedna ma 57/100, a druga strona która ma tylko slider, ma wynik 40/100.

Lepiej jeśli zmienisz to teraz niż będziesz brnął w problemy, które będą ujawniać się w przyszłośći, z każdą aktualizacją Joomla. Policz czas, który spędzasz nad tą stroną i nierozwiązane problemy i czy to jest warte "darmowego szablonu". Przy okazji niczego nie nauczysz się o Joomla na przyszłość.

[Patertus]

Witam! Wygląda na to, że próbujesz dodać ikonę dla pozycji menu "home" w swoim szablonie stworzonym za pomocą narzędzia TemplateToaster 8. Przy użyciu klasy "fa-solid fa-house" ikona działa poprawnie, ale nie wiesz, jak ją wymusić na daną pozycję w menu.


Aby wymusić wyświetlanie ikony tylko dla konkretnej pozycji menu (np. dla elementu "O firmie"), możesz dodać specyficzną klasę lub identyfikator dla tego elementu i użyć go w CSS, aby ustawić tło na ikonę. Wygląda na to, że szablon generuje kod z klasą "hkb_menu_items_parent" dla elementów menu.


Oto jak możesz to zrobić:


Dodaj klasę "home-icon" lub identyfikator "home-icon" do elementu menu "O firmie". Wybierz tylko jedną z tych opcji.
Przy użyciu klasy:


html
Copy code
<li class="hkb_menu_items_parent dropdown home-icon">
<a class="hkb_menu_items_parent_link" href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>
Przy użyciu identyfikatora:


html
Copy code
<li class="hkb_menu_items_parent dropdown">
<a id="home-icon-link" class="hkb_menu_items_parent_link" href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>
Następnie w swoim arkuszu CSS dodaj regułę dla klasy "home-icon" lub identyfikatora "home-icon" i ustaw tło na ikonę, która ma zostać wyświetlona:
css
Copy code
.home-icon .menuchildicon::before {
font-family: "Font Awesome 5 Free"; /* Upewnij się, że używasz odpowiedniej nazwy czcionki dla Font Awesome */
content: "\f015"; /* Kod unicode ikony domku (fa-solid fa-house) */
/* Dodatkowe style dla ikony (rozmiar, kolor itp.) */
}
lub


css
Copy code
#home-icon-link .menuchildicon::before {
font-family: "Font Awesome 5 Free"; /* Upewnij się, że używasz odpowiedniej nazwy czcionki dla Font Awesome */
content: "\f015"; /* Kod unicode ikony domku (fa-solid fa-house) */
/* Dodatkowe style dla ikony (rozmiar, kolor itp.) */
}
Upewnij się, że w CSS używasz odpowiedniej nazwy czcionki dla Font Awesome (w tym przykładzie jest to "Font Awesome 5 Free"), oraz że określisz właściwe style dla ikony, takie jak rozmiar i kolor.


Po wykonaniu tych kroków ikona powinna być widoczna tylko dla wybranej pozycji menu "O firmie".

[Patertus]

Witam! Wygląda na to, że próbujesz dodać ikonę dla pozycji menu "home" w swoim szablonie stworzonym za pomocą narzędzia TemplateToaster 8. Przy użyciu klasy "fa-solid fa-house" ikona działa poprawnie, ale nie wiesz, jak ją wymusić na daną pozycję w menu.


Aby wymusić wyświetlanie ikony tylko dla konkretnej pozycji menu (np. dla elementu "O firmie"), możesz dodać specyficzną klasę lub identyfikator dla tego elementu i użyć go w CSS, aby ustawić tło na ikonę. Wygląda na to, że szablon generuje kod z klasą "hkb_menu_items_parent" dla elementów menu.




Oto jak możesz to zrobić:


Dodaj klasę "home-icon" lub identyfikator "home-icon" do elementu menu "O firmie". Wybierz tylko jedną z tych opcji.
Przy użyciu klasy:
https://kryptowiedza.pl/najlepszy-ranking-gield-kryptowalut/ (https://kryptowiedza.pl/najlepszy-ranking-gield-kryptowalut/)

html
Copy code
<li class="hkb_menu_items_parent dropdown home-icon">
<a class="hkb_menu_items_parent_link" href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>
Przy użyciu identyfikatora:


html
Copy code
<li class="hkb_menu_items_parent dropdown">
<a id="home-icon-link" class="hkb_menu_items_parent_link" href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>
Następnie w swoim arkuszu CSS dodaj regułę dla klasy "home-icon" lub identyfikatora "home-icon" i ustaw tło na ikonę, która ma zostać wyświetlona:
css
Copy code
.home-icon .menuchildicon::before {
font-family: "Font Awesome 5 Free"; /* Upewnij się, że używasz odpowiedniej nazwy czcionki dla Font Awesome */
content: "\f015"; /* Kod unicode ikony domku (fa-solid fa-house) */
/* Dodatkowe style dla ikony (rozmiar, kolor itp.) */
}
lub


css
Copy code
#home-icon-link .menuchildicon::before {
font-family: "Font Awesome 5 Free"; /* Upewnij się, że używasz odpowiedniej nazwy czcionki dla Font Awesome */
content: "\f015"; /* Kod unicode ikony domku (fa-solid fa-house) */
/* Dodatkowe style dla ikony (rozmiar, kolor itp.) */
}
Upewnij się, że w CSS używasz odpowiedniej nazwy czcionki dla Font Awesome (w tym przykładzie jest to "Font Awesome 5 Free"), oraz że określisz właściwe style dla ikony, takie jak rozmiar i kolor.


Po wykonaniu tych kroków ikona powinna być widoczna tylko dla wybranej pozycji menu "O firmie".

Aby dodać ikonę dla pozycji menu "O firmie" przy użyciu klasy, wykonaj następujące kroki:


Dodaj klasę "home-icon" do elementu menu "O firmie":
html
Copy code
<li class="hkb_menu_items_parent dropdown home-icon">
<a class="hkb_menu_items_parent_link" href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>
Następnie w swoim arkuszu CSS dodaj regułę dla klasy "home-icon" i ustaw tło na ikonę, która ma zostać wyświetlona:
css
Copy code
.home-icon .menuchildicon::before {
font-family: "Font Awesome 5 Free"; /* Upewnij się, że używasz odpowiedniej nazwy czcionki dla Font Awesome */
content: "\f015"; /* Kod unicode ikony domku (fa-solid fa-house) */
/* Dodatkowe style dla ikony (rozmiar, kolor itp.) */
}
Alternatywnie, jeśli wolisz użyć identyfikatora, wykonaj następujące kroki:


Dodaj identyfikator "home-icon-link" do elementu menu "O firmie":
html
Copy code
<li class="hkb_menu_items_parent dropdown">
<a id="home-icon-link" class="hkb_menu_items_parent_link" href="/index.php">
<span class="menuchildicon"></span> O firmie
</a>
<hr class="horiz_separator">
</li>
Następnie w swoim arkuszu CSS dodaj regułę dla identyfikatora "home-icon-link" i ustaw tło na ikonę:
css
Copy code
#home-icon-link .menuchildicon::before {
font-family: "Font Awesome 5 Free"; /* Upewnij się, że używasz odpowiedniej nazwy czcionki dla Font Awesome */
content: "\f015"; /* Kod unicode ikony domku (fa-solid fa-house) */
/* Dodatkowe style dla ikony (rozmiar, kolor itp.) */
}

[terra]

To właśnie dlatego mówię, że to mija się z celem. Joomla jest po to, aby takich kombinacji nie robić, wystarczy używać szablonu, który jest zrobiony "zgodnie ze sztuką".