breaking游戏

書名： Bootstrap 4：Responsive Web Design
作者名： Silvio Moreto Matt Lambert Benjamin Jakobus Jason Marah
本章字?jǐn)?shù)： 470字
更新時(shí)間： 2021-07-09 18:54:45

Using Bootstrap icons

Bootstrap is such a nice thing! It provides for us more than 250 icons ready for use and fully resizable. The icons were created from the Glyphicon Halflings set (http://glyphicons.com/). They are fully rendered as fonts, so you can customize both size and color for each one of them. To make use of that, let's see the features section on the landing page. As you can see, we let this section be a little simpler. By adding some fonts, we will get a nicer result:

<section id="features">
  <div class="container">

    <!-- row 5 -->
    <div class="row">
      <div class="col-sm-12">
        <h3 class="text-center">Features</h3>
        <p class="text-center">Features headline message</p>
      </div>
    </div>

    <!-- row 6 -->
    <div class="row">
      <div class="col-sm-2 col-md-4">
        <div class="feature">
 <span class="glyphicon glyphicon-screenshot" aria-hidden="true"></span>
          <span class="feature-tag">Product focus</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
 <span class="glyphicon glyphicon-education" aria-hidden="true"></span>
          <span class="feature-tag">Teaching as a passion</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
 <span class="glyphicon glyphicon-send" aria-hidden="true"></span>
          <span class="feature-tag">Spreading knowledge</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
 <span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
          <span class="feature-tag">Save your day time</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
 <span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
          <span class="feature-tag">Make it fancy</span>
        </div>
      </div>
      <div class="col-sm-2 col-md-4">
        <div class="feature">
 <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
          <span class="feature-tag">Made with love</span>
        </div>
      </div>
      </div>
    </div>
  </div>
</section>

So, from the beginning, here is the code of the modified features section. The bold text corresponds to the icon additions. It is pretty simple to add an icon. Just check out the options at http://getbootstrap.com/components/#glyphicons, copy the class code, and use it in an element. Note that you must add both classes, .glyphicon and .glyphicon-*.

Tip

The aria-hidden property

You may have noticed that there is a property called aria-hidden="true" present in all the icons. The reason for this is that the fonts are represented as Unicode characters, meaning they may represent words. Therefore, to prevent that accessibility, screen readers start reading those characters such as they are words, the aria-hidden attribute prevents that.

Even more, we made some changes to the CSS file, adding more rules for the current working section. Add the following style to the base.css file, located in the css folder:

section#features .feature {
  padding-top: 2rem;
  padding-bottom: 4rem;
  text-align: center;
}

section#features .glyphicon {
  font-size: 2rem;
}

section#features .glyphicon-heart {
  color: #E04C4C;
}

section#features .feature-tag {
  max-width: 10.7em;
  display: inline-block;
  text-align: left;
  margin-left: 1.5em;
  font-size: 1.7rem;
}

With this, we want to show some nice options that you can use with icons. The first one is that you can change the size of the icon by changing its font size. In our case, we set it to font-size: 2rem. The second one is that icons provide the option to change their color by just adding the CSS color rule. We applied it to the heart icon, because the heart must be red—color: #E04C4C.

The preceding screenshot shows the final result of the Features section. As you can see, it is pretty simple to use icons in Bootstrap. Also, the possibilities that the framework offers are very suitable for daily adjustments, such changing icons' colors and sizes.

Tip

Using other icons sets

There are plenty of other icon sets out there that can be used just like glyphicons for Bootstrap. Among all of them, it is worth mentioning Font Awesome (https://fortawesome.github.io/Font-Awesome/). It stands out from others, since it was the first icon set to use font encoding, together with a wide variety of icons.

官术网_书友最值得收藏!

Bootstrap 4：Responsive Web Design

Using Bootstrap icons

Tip

Tip