Icon Utilities

Common styling for icons components.

Utilities for icons

Examples

Icon Sizes Example

We have 4 font sizing classes for use with icons. The fs-lg-icon class is our most frequently used, you’ll commonly find it in card grids for things like index pages.

fs-md-icon

      <i class="fa-duotone fa-user-magnifying-glass fs-md-icon"></i>

fs-lg-icon

      <i class="fa-duotone fa-user-magnifying-glass fs-lg-icon"></i>

fs-xl-icon

      <i class="fa-duotone fa-user-magnifying-glass fs-xl-icon"></i>

fs-xxl-icon

      <i class="fa-duotone fa-user-magnifying-glass fs-xxl-icon"></i>

Large Icon on Card Grid Example

The following is a common design patter on admin pages where we have a grid of cards and icons using the fs-lg-icon class.

Search Consumers

Search and manage consumer accounts for E&H Ace Hardware.

Search Consumers

Add Consumers

Create new consumer accounts for E&H Ace Hardware.

Add Consumers

Consumer Fields

Manage custom fields for E&H Ace Hardware consumer accounts.

Consumer Fields

<div class="row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
  <div class="col">
    <div class="card readable shadow h-100">
      <div class="card-body text-center">
        <div class="fs-lg-icon"><i class="fa-duotone fa-user-magnifying-glass"></i></div>        <h4 class="card-title">Search Consumers</h4>
        <p>Search and manage consumer accounts for E&amp;H Ace Hardware.</p>
      </div>
      <div class="card-footer">
        <a class="btn btn-primary btn-lg d-block" href="/admin/retailers/3278/consumers/search">
          <i class="fa-duotone fa-user-magnifying-glass"></i> Search Consumers
        </a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card readable shadow h-100">
      <div class="card-body text-center">
        <div class="fs-lg-icon"><i class="fa-duotone fa-user-plus"></i></div>
        <h4 class="card-title">Add Consumers</h4>
        <p>Create new consumer accounts for E&amp;H Ace Hardware.</p>
      </div>
      <div class="card-footer">
        <a class="btn btn-primary btn-lg d-block" href="/admin/retailers/3278/consumers/new">
          <i class="fa-duotone fa-user-plus"></i> Add Consumers
        </a>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card readable shadow h-100">
      <div class="card-body text-center">
        <div class="fs-lg-icon"><i class="fa-duotone fa-solid fa-user-gear"></i></div>
        <h4 class="card-title">Consumer Fields</h4>
        <p>Manage custom fields for E&amp;H Ace Hardware consumer accounts.</p>
      </div>
      <div class="card-footer">
        <a class="btn btn-primary btn-lg d-block" href="/admin/retailers/3278/consumer_field_assignments">
          <i class="fa-duotone fa-solid fa-user-gear"></i> Consumer Fields
        </a>
      </div>
    </div>
  </div>
</div>