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.
Co znajdziesz w tym wpisie
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.