Ikony Font Awesome pojawiły się już we frameworku Gantry 4 ale ich stosowanie nie obywało się bez problemów. W wydanym w tym roku Gantry 5 nastąpiła duża integracje fontów fa-fa z tym frameworkiem. Możemy je dodawać w bardzo wygodny sposób bez użycia kodów. W Gantry 5 są one już we frameworku, nie musimy ich pobierać ze strony producenta i instalować w naszym cms'ie.

Font Awesome to czcionki skalowalne - są wektorowe, które mogą być natychmiast dostosowane za pomocą CSS- rozmiar, kolor, cień..


 W Gantry 5 pojawiły się Particles - cząstki - i to w nich widać najbardziej integracje fa-fa Awesome z frameworkiem.

Cząstek można używać jako części "Layout" Gantry 5 strony www Lublin lub jako zwykłych modułów. I to pokażę w tym tekście - na przykłacie cząstki "Social"  

1. Przechodzimy do zaplecza naszej strony www na Joomla - zakładka Rozszerzenia >> Moduły i klikamu button "Utwórz"

 

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

2. Wybieramy Gantry 5 Particle - żeby była widoczna ta opcja musimy mieć zainstalowane Gantry 5 !!!

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

 

3. Wpisujemy tytuł moduły, wybieramy jego pozycję na stronie, przypisujemy do wybranych zakładek w menu naszej strony www Puławy i klikamy szary button "Pick a Particle"

 

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

4. Pojawia się pop-up w którym możemy wybrać rodzaj cząstki - particles. Ja klikam na button "Social" i kolejno na "Select"

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

 

5. Pojawia się okno "Particle". Tu konfigurujemy cząstkę - particle.
- CSS Classes - klasa "social" jest już domyślnie dodane ale możemy tworzyć swoje klasy css np w pliku custom.scss i potem w tym oknie je dodawać.
- Title - Wcześniej już określiliśmy nazwę modułu ale jak widać możemy nadać nazwę cząstki
- Target - ponieważ będziemy odsyłać do stron mediów społecznościowych raczej będziemy chcieli żeby otwierała się nowa zakładka a nasza strona pozostawała otwarta więc cel określamy jako nowe okno.

- Social Items za pomocą tego elementu będziemy tworzyć nowe ikonki i linki do facebooka i google plus

OK klikam plusika przy tej sekcji

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

6. Pojawia się nowa pozycja "New Item" kiedy na nią najedziemy kursorem pojawiają się dwie małe ikonki
- "kosz" do kasowania pozycji
- "pisak" do edycji nazwy pozycji "New item"

Klikam ikonkę "pisak" i zmieniam nazwę pozycji "New item" na "facebook". Następnie klika na nazwę pozycji "facebook"

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

7. Pojawia się kolejny pop-up. Jak widać jest już tu wpisana wcześniej nazwa "facebook" i pisak przy niej więc na tym etapie można ją także zmienić.

- Icon - tu wybieramy ikonę fa-fa
- Text - jeśli chcemy żeby oprócz ikonki był tekst to pole wypełniamy także
- Link - link do naszego firmowego profilul - fanpage na Faceboku (lub innego ale w tym momencie ja wybieram facebook) 

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 {josociallocker}

8. Kolejne okna. Tu możemy wybrać ikonę którą chcemy wykorzystać w danej pozycji i zdefiniować jej ustawienia takie jak wielkość i rotację. Kiedy najeżdżamy kursorem na konkretną ikonkę pojawia się jej powiększeni a właściwie ikonka i dostępne jej wielkości.

- Fixed Width - fa-fw ustawia ikony w stałej szerokości. Świetne do wykorzystania przy różnych szerokościach icon narzucić wyrównanie. Szczególnie przydatne w takie rzeczy jak list nawigacyjna i grupa list.

- Spinning - klasa fa-spin to animacja - ta opcja działa w połączeniu z oknem "Rotation"

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

9. Kiedy wybierzemy jakąś ikonkę i określimy jej parametry tak jak ja to zrobiłem, to na dole okna pojawia się podgląd takiej ikonki i jej animacja

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

10. Jeśli nie mamy chęci szukania ikon na piechotę skorzystajmy z okienka wyszukiwarki. Ja wpisuje "facebook"

Już wpisanie początku frazy powoduje wyszukiwanie ikon w locie. Dla "facebook" mamy 4 ikonki. Wybieram "fa-facebook-official" i klikam button "Select"

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

11. Klikam w kolejnych okna "Apply" aż powrócę do tego pop-up'u. Tu za pomocą plusika można dodawać i linkować kolejne ikonki fa-fa powtarzając wcześniejszą procedurę.

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

12. Efekt na stronie internetowej może być np. taki jak tu. Pamiętajmy że możemy dodawać własne style dla tych ikon w css - zmieniać ich kolor, cienie, gradienty ... itp

Projektowanie stron Lublin - responsywne strony www Lublin na joomla

 

 


Projektowanie stron Lublin

Ikony Font Awesome wydawane są na licencji Open Source (GPL) a zatem można je wykorzystywać do dowolnych celów, także komercyjnych.

{/josociallocker}

Blog - popularne

Specified key was too long; max key length is 767 bytes - błąd podczas przywracania strony za...

Klient poprosił mnie o zwiększenie wersji PHP do najnowszej wersj PHP 7.2. Przy stronach firmowych najczęściej nie wykonuję takich operacji z automatu tylko staram się na początek sprawdzić czy jest...
Czytaj dalej

Akeeba Kickstart - czyli jak przywrócić stronę internetową Joomla 3 z kopii zapasowej Akeeba Backup

Przenosimy stronę na CMS joomla na inny serwer. Mając wykonaną za pomocą Akeeba Backup kopię strony www możemy ją przenieść w krótkim czasie na dowolny serwer. Czas wysyłania na serwer rozpakowanych...
Czytaj dalej

Jak zrobić banner slideshow w joomla 3 - dodatek Roksprocket dla strony www na joomla

Roksprocket dla Joomla czyli jak zrobić banner dla naszej strony internetowej na joomla. Roksprocket do moduł którego wersja występuje także dla wordpressa. Można za jego pomocą wykonać nie tylko...
Czytaj dalej

Jak dodać firmę do Google Maps

Tworząc firmową stronę internetową prawie zawsze umieszczamy na niej mapę z lokalizacją firmy. Czasy statycznych map graficznych minęły dawno temu. Teraz najczęściej szukamy firm na google które ma...
Czytaj dalej

Jak dodać film z youtube stronę www na joomla - dodatek AllVideos od Joomla Works

Niezbyt często korzystam w wykonywanych stronach www z możliwości osadzania w nich wideo. Jeśli klienci mają przygotowane materiały wideo warto je wykorzystać nie tylko z powodu lepszego zapoznania...
Czytaj dalej

Jak wykonać przekierowanie DNS domeny zarejestrowanej na home.pl na serwer nazwa.pl - na którym...

Przekierowanie DNS wykonujemy kiedy domenę zarejestrowaliśmy w jednej firmie, a hosting dla naszej strony internetowej wykupiliśmy w innej. Dzisiaj pokażę jak przekierować domenę zarejestrowaną na...
Czytaj dalej

Przezroczystość w plikach PNG - jak zapisać plik z PNG z przezroczystością w Adobe Photoshop dla...

Format .png to drugi w kolejności po .jpg format plików graficznych wykorzystywany w czasie tworzenia stron internetowych. Oczywiście większość użytkowników internetu najbardziej kojarzy .jpg bo w...
Czytaj dalej

WordPress - jak wykonać kopię zapasową strony www na WordPress za pomocą Akeeba Backup

WordPress podobno nie sprawia problemów, ale dmuchając na zimne - kopię strony www należy wykonać jeśli zależy nam na bezpieczeństwie naszych danych. Akeeba Backup to narzędzie które powstało jako...
Czytaj dalej

Akeeba Backup - jak wykonać kopię strony www na CMS Joomla 3

Akeeba Backup pozwala na tworzenie kopii na wszystkich wersjach joomla - tu w wersji dla Joomla 3 Mając stronę internetową utrzymywaną na dobrym hostingu nie musimy martwić się o wykonywanie kopii...
Czytaj dalej