Глификоны с помощью Twitter Bootstrap 3

Последнее обновление: 27 мая 2019 11:44:38 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Задача

Иконки шрифтов становятся все более популярными из-за ряда преимуществ. В этом уроке мы обсудим, как использовать и настраивать Glyphicons с помощью Twitter Bootstrap 3. Мы также объясним, как работают правила CSS, что даст вам лучшее представление о том, как работают шрифты значков в целом. Таким образом, вы освоите работу с любым набором иконок, кроме Glyphicons.

Что такое Глификоны?

Глификоны - это шрифты значков, которые вы можете использовать в своих веб-проектах. Хотя вам нужно коммерческое лицензирование для использования Glyphicons, но вы можете использовать их с проектами на основе Twitter Bootstrap бесплатно. Единственное, рекомендуется предоставить ссылку на сайт Glyphicon .

Получение Глификонов

Если вы загрузили Bootstrap 3 по адресу https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip (или в любой предыдущей версии 3x), вы можете найти глифы в шрифтах папка в папке dist. Существует четыре файла: glyphicons-halflings-Regular.eot, glyphicons-Halfling-Regular.svg, Glyphicons-Halfling-Regular.ttf и glyphicons-Halfling-Regular.woff. Связанные правила CSS присутствуют в файлах bootstrap.css и bootstrap-min.css в папке css папки dist.

Как пользоваться

В общем, мы можем вывести, что общий синтаксис для использования Glyphicons с Bootstrap 3 следующий

<span class="glyphicon glyphicon-*"></span>

Где * - любое из множества ключевых слов, каждое из которых представляет определенный значок. В следующем примере показано, как использовать его с кнопкой.

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Вы можете посмотреть живую демонстрацию примера здесь

Глификон с навигацией

<!DOCTYPE html>
<html>
  <head>
    <title>Using Glyphicons with Navbar</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
    padding-top: 50px;
    padding-left: 50px;
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
            <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div><!-- /.container -->
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="dist/js/bootstrap.min.js"></script>
  </body>
</html>

Live демо

Объяснение правил CSS позади

Следующие правила CSS составляют класс глифов

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

Таким образом, правило шрифта на самом деле объявляет семейство шрифтов и места, где были найдены глифы.

Класс .glyphicon объявляет относительную позицию 1px сверху, он отображается как inline-block, объявляет семейство шрифтов, заявляет, что стиль и вес шрифта оба нормальные, устанавливает высоту строки равной 1. Кроме того, он использует -webkit-font-smoothing: сглаживание и -moz-osx-font-smoothing: оттенки серого; которые используются для достижения кросс-браузерной согласованности.

Тогда есть

.glyphicon:empty {
  width: 1em;
}

Для пустого глифика.

После этого есть 200 классов для каждого значка. Общий формат этих классов выглядит следующим образом

.glyphicon-keyword:before {
  content: "hexvalue";
}

Например, для пользовательского значка, используемого в нашем примере, класс выглядит следующим образом

.glyphicon-user:before {
  content: "\e008";
}

Теперь мы увидели, как его использовать, мы увидим, как настроить глифы.

Мы начнем с нашего предыдущего примера и сделаем настройку, изменив размер шрифта, цвет и применив тень текста, чтобы значок выглядел по-другому.

Ниже приведен код, с которого мы начнем

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

А вот как это выглядит

Настройка размера шрифта

Увеличив или уменьшив размер шрифта значков, вы можете заставить значки выглядеть больше или меньше.

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Настройка цвета

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

Применение тени текста

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

Надеюсь, что это начнется с использования и настройки Glyphicons с вашими проектами на Twitter Bootstrap.

Вопросы? Предложения? Присоединяйтесь к обсуждению ниже. Для предстоящих уроков, пожалуйста, подпишитесь на наш канал .

Предыдущий: Twitter Bootstrap Типографика учебник
Далее: Твиттер Учебные таблицы Bootstrap