Bootstrap w wersji 3 jako framework CSS posiada wiele wbudowanych funkcji jedną z nich jest biblioteka ikon (Glyphicons).
Podstawowa biblioteka zawiera ponad 230 symboli. W jej skład wchodzą różnego typu strzałki, symbole podstawowych figur do szachów, symbole pobierania i wgrywania plików oraz wiele innych. Niestety nie mamy tu logotypów (ikon) symboli społecznościowych, aby móc ich użyć musimy zainstalować na stronie dodatkowe skrypty.
Przykładowe ikony w Bootstrap Glyphicons
- glyphicon glyphicon-floppy-disk
- glyphicon glyphicon-phone
- glyphicon glyphicon-calendar
W kodzie strony wygląda to tak:
<span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
<span class="glyphicon-class">glyphicon glyphicon-phone</span>
<span class="glyphicon-class">glyphicon glyphicon-calendar</span>Jak skorzystać z ikon:
Aby użyć ikony należy znaleźć klasę opisującą daną ikonę i nadać ją elementowi, który ma posiadać dany symbol np.
class="glyphicon glyphicon-calendar"glyphicon – odnosi się ogulnie do ikon (icons) wykożystywanych w bootstrap posiada podstwowe ustawienia
glyphicon-calendar – jest reguła dająca ikonkę a właściwie tekst napisany specjalnym fontem (elektroniczną czcionką)
Oczywiście nie musi to być jak w przykładzie może to być inny element taki jak wypunktowanie czy paragraf. Ikonki takie świetnie nadają się do ożywienia strony kontaktowej, o firmie czy z plikami do pobierania gdzie można nimi zastąpić tekst.
Warto pamiętać, że dla prawidłowego działania symbole wymagają zainstalowania:
- pliku bootstrap.min.css
- oraz zestawu fontów dołączonych do paczki bootstrapa
Więcej ikon można znaleźć pod adresem:
http://getbootstrap.com/components/#glyphicons