Many Icons

Best Practices

Shows the main feature or benefit alongside smaller benefits.

• Use the large icon for the main feature or benefit, and the small icon for additional features or benefits.

Usage

<div class="feature-many-icons">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h2 class="feature-big-text"><span class="icon fas fa-lock mb-2" aria-hidden="true"></span><br />Big Text.</h2>
      </div>
      <div class="col-md-6 text-white">
        <div class="mb-2 text-white text-lg-left text-lg-start">
          <span class="icon fas fa-shield-alt" aria-hidden="true"></span>
          <span class="icon fas fa-user-lock mx-4" aria-hidden="true"></span>
          <span class="icon fas fa-id-card" aria-hidden="true"></span>
        </div>
        <p class="feature-small-text">This is smaller text which explains this block.</p>
      </div>
    </div>
  </div>
</div>