bootstrap tutorials kurs

Bootstrap 3 Glyphicons – dostępne ikony

przezAurelia Sypniewska
Czas czytania: < 1 minut

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

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