Bootstrap 3 Glyphicons – dostępne ikony

bootstrap tutorials kurs

Kategoria wpisu Bootstrap 3, Kurs Bootstrap Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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:

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.

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

Dodaj komentarz

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