Glify Bootstrap

Jest to biblioteka ikon monochromatycznych dostępnych w formatach obrazów rastrowych, formatach obrazów wektorowych oraz jako czcionki. Zawiera ponad 250 glifów w formacie czcionki. Możesz używać tych czcionek w swoich projektach internetowych. Te glify nie są darmowe, ale jeśli nie musisz nic wydawać, jeśli używasz ich w projektach opartych na Bootstrap.

Ładowanie czcionki (biblioteka)

Aby załadować bibliotekę Bootstrap Glyphicons, skopiuj i wklej następujący wiersz w sekcji <head> strony internetowej.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

Korzystanie z Icon

Glyphicons Bootstrap zawiera wiele ikon. Wybierz jedną z nich i dodaj nazwę klasy icon do dowolnego elementu HTML w tagu <body>. W poniższym przykładzie użyliśmy ikony drzewa, a nazwa jego klasy totree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

Wytworzy następujący wynik -

Definiowanie rozmiaru

Możesz zwiększyć lub zmniejszyć rozmiar ikony, definiując jej rozmiar w CSS i używając go razem z nazwą klasy, jak pokazano poniżej. W poniższym przykładzie zdefiniowaliśmy rozmiar jako 6 em.

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Wygeneruje następujący wynik:

Definiowanie koloru

Możesz zdefiniować kolor ikony za pomocą CSS. Poniższy przykład pokazuje, jak zmienić kolor ikony drzewa.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Wytworzy następujący wynik -