Bootstrap ikonę czcionki (Glyphicons)

Ten rozdział wyjaśni ikonę czcionki (Glyphicons), a kilka przykładów, aby zrozumieć jego wykorzystania. Bootstrap formatów czcionek pakiecie z ponad 200 glifów. Po pierwsze, niech najpierw zrozumieć, co jest ikona czcionki.

Co oznacza ikona czcionki?

Czcionki ikona jest ikonę czcionki użyte w projekcie internetowym. Chociaż, niziołki Glyphicons potrzebują licencję na wykorzystanie, ale można na podstawie projektu Bootstrap do swobodnego wykorzystania tych ikon.

W celu wyrażenia wdzięczności ikona autor, mam nadzieję, że dodasz linki GLYPHICONS miejsce podczas użytkowania.

Pobierz ikonę Czcionki

Mamy środowisku zainstalowany Rozdziały Pobierz wersję 3.x Bootstrap i zrozumieć jego strukturę katalogów. W ikony folderuczcionekmożna znaleźć czcionkę, która zawiera te pliki, co następuje:

• glyphicons-niziołki-regular.eot
• glyphicons-niziołki-regular.svg
• glyphicons-niziołki-Regular.ttf
• glyphicons-niziołki-regular.woff

Podobne reguły CSS zapisane w folderzedistcss folderubootstrap.cssibootstrap-min.cssw pliku.

Czcionki Lista ikon

Kliknij tutaj, aby wyświetlić listę dostępnych ikonę czcionki.

Interpretacja CSS zasad

Poniższa reguła CSS stanowi glyphicon klasę.

@ Font-face {
  font-family: 'Glyphicons Niziołki';
  src: url ( "../ fonts / glyphicons-niziołki-regular.eot ');
  src: url ( "../ fonts / glyphicons-niziołki-regular.eot #iefix?") Format ( "embedded-OpenType"), url ( "../ fonts / glyphicons-niziołki-regular.woff") Format ( "WOFF"), url ( "../ fonts / glyphicons-niziołki-Regular.ttf") Format ( 'TrueType'), url ( "../ fonts / glyphicons-niziołki-regular.svg # glyphicons_halflingsregular") Format ( 'SVG');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Niziołki';
  -webkit-font-wygładzanie: antyaliasing;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-wygładzanie: szarości;
}

Tak więc zasada font-face jest w rzeczywistości miejsce, aby znaleźć deklaracji glyphicons font-family i lokalizację.

Klasa .glyphicon zadeklarować względnego przesunięcia pozycji od góry 1px, renderowany jako inline-block, czcionek oświadczeniu, postanowień font-style i font-weight jest normalne, ustawić wysokość wiersza 1. Ponadto, korzystanie z -webkit-font-wygładzanie: antyaliasing i -moz-osx-font-wygładzanie: szarości; uzyskać spójność różnych przeglądarkach.

Następnie, w którym

.glyphicon: empty {
  Szerokość: 1 em;
}

Puste glyphicon.

Istnieje 200 klasy, każda klasa w postaci ikony. Te wspólne klasy Format jest następujący:

.glyphicon-hasła: before {
  treść: "hexvalue";
}

Na przykład, ikony użytkownika do użycia, to klasy jak następuje:

.glyphicon-user: przed {
  treść: "e008 \";
}

zwyczaj

Aby użyć ikony, wystarczy użyć następującego kodu. Należy zachować odpowiedni odstęp między ikon i tekstu.

<Span class = "glyphicon glyphicon-search"> </ span>

Poniższy przykład pokazuje, jak używać ikonę Czcionki:

Wyniki przedstawiają się następująco:

Ikona czcionki w pasku nawigacyjnym

Ikona Niestandardowe czcionki

Widzieliśmy, jak używać ikonę Czcionki, potem zobaczymy, jak dostosować ikonę czcionki.

Zaczniemy powyższy przykład, poprzez zmianę rozmiaru czcionki, kolor i zastosować cień tekstowy być dostosowane ikony.

Oto kod zaczyna:

<Button type = class "przycisk" = "btn btn btn-podstawowy-LG">
  <Span class = "glyphicon glyphicon-user"> </ span> Użytkownik
</ Button>

Efekt jest następujący:

Niestandardowy rozmiar czcionki

Poprzez zwiększenie lub zmniejszenie rozmiaru czcionki ikony, można sprawić, że ikony są większe lub mniejsze.

<Button type = class "przycisk" = "btn btn btn-podstawowy-LG" style = "font-size: 60px">
  <Span class = "glyphicon glyphicon-user"> </ span> Użytkownik
</ Button>

kolor czcionki niestandardowe

<Button type = class "przycisk" = "btn btn btn-podstawowy-LG" style = "color: rgb (212, 106, 64);">
  <Span class = "glyphicon glyphicon-user"> </ span> Użytkownik
</ Button>

Zastosuj cień tekstu

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Online niestandardowy ikonę czcionki

Kliknij tutaj, aby dostosować ikonę czcionki >>

lista ikon