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:
- Najpierw należy pobrać wtyczkę NS Font Awesome , zainstalować ją i opublikować.
- Następnie należy pobrać komponent RokCandy i również go zainstalować.
- W kolejnym kroku przejdź do Komponenty->RokCandy->Macros i utwórz za pomocą przycisku nowe makro
- 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
- W polu Html wpisz <i class="fa {icon}"></i>
- Po dodaniu skryptów powinno to wyglądać w ten sposób
- Zapisz i wyjdź
- Teraz czas na zajęcie się pozycją menu. Możesz edytować już istniejące lub dodać nową pozycję do jakiegoś menu
- 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.
- 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
- I to tyle. Sprawdź efekt