Font Awesome — niezbędnik webmastera

10 czerwca 2014
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

Font Awesome to font zawierający wektorowe ikony przeznaczone do użytku na stronach internetowych. Niedawno ukazała się jego wersja 4.1 zawierająca 439 ikon. Dzięki niemu nie trzeba stosować sprite’ów albo używać dziesiątek małych obrazków, a wystarczy tylko użyć elementów przypisanych do odpowiednich klas CSS.

ikony font awesome

Pobieranie i pliki Font Awesome

Na stronie http://fortawesome.github.io/Font-Awesome/ należy pobrać paczkę ZIP klikając przycisk Download.

Po rozpakowaniu paczki otrzymujemy folder zawierający cztery podfoldery: css, fonts, less oraz scss.

W folderze css znajduje się arkusz stylów, który należy dołączyć do swojej strony internetowej, aby używać fontu. Arkusz występuje w dwóch wersjach: pełnej do testowania oraz zminimalizowanej do użytku w środowisku produkcyjnym.

Najważniejsze pliki znajdują się w folderze fonts. Jest to font Font Awesoma w następujących formatach: OTF, EOT, SVG, TTF oraz WOFF.

Foldery less i scss zawierają arkusze stylów w formatach LESS i SCSS, z których można samodzielnie wygenerować kod CSS.

Dołączanie fontu do strony

Najprostszym sposobem na użycie symboli z zestawu Font Awesome na swoich stronach jest dołączenie arkusza stylów z folderu css do tych stron oraz umieszczenie w odpowiednim miejscu folderu z fontami, np.:


<link rel="stylesheet" href="ścieżka/do/font-awesome/css/font-awesome.min.css">

Ścieżka do folderu fonts powinna w tym przypadku być następująca:

ścieżka/do/font-awesome/fonts

Po dołączeniu arkusza stylów i odpowiednim ustawieniu ścieżki do plików fontów, można zacząć używać symboli na swoich stronach.

Jak używać

Ikony Font Awesome można umieszczać na stronie za pomocą klasy CSS fa (pełni rolę przedrostka) i klasy reprezentującej nazwę ikony. Klasy te powinno się definiować dla elementów śródliniowych, a więc np. span, i, b itd. Oto kilka przykładów zastosowania tych klas:

<i class="fa fa-cog"></i>
<i class="fa fa-book"></i>
<i class="fa fa-check-square"></i>

Ciekawe funkcje

Dodatkowo dostępnych jest wiele innych klas, np. zestaw klas służących do ustawiania rozmiaru symboli względem kontenera: fa-lg (powiększenie o 33%), fa-2x, fa-3x, fa-4x, fa-5x :

<i class="fa fa-cog fa-lg"></i>
<i class="fa fa-book fa-4x"></i>
<i class="fa fa-check-square fa-2x"></i>

Są też klasy służące do obracania kręcenia elementami w kółko (fa-spin) oraz do ich obracania o określony kąt (fa-rotate-*):

 <i class="fa fa-cog fa-spin"></i>
<i class="fa fa-cog fa-rotate-90"></i>

Dokumentacja

Szczegółowe informacje na temat obsługi fontu można znaleźć w dokumentacji na stronie http://fortawesome.github.io/Font-Awesome/examples/.

Autor: Łukasz Piwko

Tłumacz angielskiej i francuskiej literatury specjalistycznej, nauczyciel, wykładowca i maniak technologii programistycznych. Interesuje go wszystko, co związane z programowaniem i tłumaczeniem tekstów na ten temat na język polski. W wolnym czasie czyta Balzaka, słucha muzyki i trenuje karate.

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *