Blog

Font awesome w menu Joomla Font awesome w menu Joomla
21 Lut

Font awesome w menu Joomla

Przez 
(2 głosów)

Niejednokrotnie pewnie spotkaliście się z ikonami wyświetlanymi przy danej pozycji menu. Oczywiście można dodać obraz ikonki do pozycji menu w zakładce Opcje pozycji menu podczas tworzenia nowej pozycji, lecz rozwiązanie to ma jeden zasadniczy minus - kolor ikony nie zmienia się po jej najechaniu. 

Dlatego też rozsądniejszym rozwiązaniem okazuje się użycie FontAwesome, czyli ikon graficznych. Poza opisaną wcześniej zmianą koloru po najechaniu, rozwiązanie to ma swój drugi plus. W przeciwieństwie do grafik, po przeskalowaniu (np. przy znacznym zbliżeniu czy powiększeniu strony) nie tracą one na jakości, czyli krótko mówiąc, nie tworzy się "pikseloza".

Tak więc zaczynamy:

  1. Najpierw należy pobrać wtyczkę NS Font Awesome , zainstalować ją i opublikować.
  2. Następnie należy pobrać komponent RokCandy i również go zainstalować.
  3. W kolejnym kroku przejdź do Komponenty->RokCandy->Macros i utwórz za pomocą przycisku nowe makro
  4. W polu Macro należy wpisać [ icon ] { icon } [ /icon ] - usuń z tego wyrażenia wszystkie spacje, aby wyglądało tak jak na obrazku poniżej
  5. W polu Html wpisz <i class="fa {icon}"></i>
  6. Po dodaniu skryptów powinno to wyglądać w ten sposób
  7. Zapisz i wyjdź
  8. Teraz czas na zajęcie się pozycją menu. Możesz edytować już istniejące lub dodać nową pozycję do jakiegoś menu
  9. W nazwie menu - załóżmy niech jest to pozycja o nazwie About wstaw przed nazwę [ icon ] fa-user [ /icon ] tak, żeby pozycja w efekcie wyglądała tak [ icon ] fa-user [ /icon ] About - usuń spacje z ciągów, aby całość wyglądała jak na poniższym obrazku.
    Pełną listę ikon znajdziesz na http://fontawesome.io/cheatsheet/
  10. Następnie przejdź do zakładki Opcje wyglądu strony i wpisz w polu Tytuł strony dla przeglądarki to, co masz wpisane za deklaracją ikony w tytule - w przykładowym przypadku jest to About
  11. I to tyle. Sprawdź efekt
Czytany 4337 razy Ostatnio zmieniany wtorek, 26 czerwiec 2018 12:54
Morphic

Webmaster, programista i core programmer z wieloletnim doświadczeniem. Z Joomla! związany od czasów Mambo.

Strona: www.morphic.pl