Глификоны начальной загрузки

Это библиотека монохроматических значков, доступных в форматах растровых изображений, форматах векторных изображений и в виде шрифтов. Он предоставляет более 250 глифов в формате шрифта. Вы можете использовать эти шрифты в своих веб-проектах. Эти глифы не бесплатны, однако, если вам не нужно ничего тратить, если вы используете их в проектах на основе Bootstrap.

Загрузка шрифта (библиотеки)

Чтобы загрузить библиотеку Bootstrap Glyphicons, скопируйте и вставьте следующую строку в раздел <head> веб-страницы.

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

Использование значка

Bootstrap Glyphicons предоставляет ряд значков. Выберите один из них и добавьте имя класса значка к любому элементу HTML в теге <body>. В следующем примере мы использовали значок дерева и его имя классаtree-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>

Он выдаст следующий результат -

Определение размера

Вы можете увеличить или уменьшить размер значка, определив его размер в CSS и используя его вместе с именем класса, как показано ниже. В следующем примере мы определили размер как 6 см.

<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>

Он выдаст следующий результат:

Определение цвета

Вы можете определить цвет значка с помощью CSS. В следующем примере показано, как изменить цвет значка дерева.

<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>

Он выдаст следующий результат -