bulma/docs/_includes/library/elements/icon.html

<span class="icon">
  <i class="fas fa-home"></i>
</span>

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</span>

<span class="icon-text">
  <span class="icon">
    <i class="fas fa-train"></i>
  </span>
  <span>Paris</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Budapest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Bucharest</span>
  <span class="icon">
    <i class="fas fa-arrow-right"></i>
  </span>
  <span>Istanbul</span>
  <span class="icon">
    <i class="fas fa-flag-checkered"></i>
  </span>
</span>

<div class="icon-text">
  <span class="icon has-text-info">
    <i class="fas fa-info-circle"></i>
  </span>
  <span>Information</span>
</div>

<p class="block">Your package will be delivered on <strong>Tuesday at 08:00</strong>.</p>

<div class="icon-text">
  <span class="icon has-text-success">
    <i class="fas fa-check-square"></i>
  </span>
  <span>Success</span>
</div>

<p class="block">Your image has been successfully uploaded.</p>

<div class="icon-text">
  <span class="icon has-text-warning">
    <i class="fas fa-exclamation-triangle"></i>
  </span>
  <span>Warning</span>
</div>

<p class="block">Some information is missing from your <a href="#">profile</a> details.</p>

<div class="icon-text">
  <span class="icon has-text-danger">
    <i class="fas fa-ban"></i>
  </span>
  <span>Danger</span>
</div>

<p class="block">There was an error in your submission. <a href="#">Please try again</a>.</p>

<table class="table is-bordered">
  <thead>
    <tr>
      <th>Container class</th>
      <th>Container size</th>
      <th>Font Awesome 5 class</th>
      <th>Icon size</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <code>icon is-small</code>
      </td>
      <td>
        <code>1rem x 1rem</code>
      </td>
      <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-small">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td rowspan="2">
        <code>icon</code>
      </td>
      <td rowspan="2">
        <code>1.5rem x 1.5rem</code>
      </td>
      <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <code>fas fa-lg</code>
      </td>
      <td>
        <code>1.33em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon">
          <i class="fas fa-lg fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <code>icon is-medium</code>
      </td>
      <td rowspan="3">
        <code>2rem x 2rem</code>
      </td>
      <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <code>fas fa-lg</code>
      </td>
      <td>
        <code>1.33em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-lg fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <code>fas fa-2x</code>
      </td>
      <td>
        <code>2em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-medium">
          <i class="fas fa-2x fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td rowspan="3">
        <code>icon is-large</code>
      </td>
      <td rowspan="4">
        <code>3rem x 3rem</code>
      </td>
      <td>
        <code>fas</code>
      </td>
      <td>
        <code>1em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <code>fas fa-lg</code>
      </td>
      <td>
        <code>1.33em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-lg fa-home"></i>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <code>fas fa-2x</code>
      </td>
      <td>
        <code>2em</code>
      </td>
      <td class="bd-icon-size">
        <span class="icon is-large">
          <i class="fas fa-2x fa-home"></i>
        </span>
      </td>
    </tr>
  </tbody>
</table>

<div class="content">
  <p>
    An invitation to
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-utensils"></i>
      </span>
      <span>dinner</span>
    </span>
    was soon afterwards dispatched; and already had Mrs. Bennet planned the courses that were to do credit to her
    housekeeping, when an answer arrived which deferred it all. Mr. Bingley was obliged to be in
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-city"></i>
      </span>
      <span>town</span>
    </span>
    the following day, and, consequently, unable to accept the honour of their
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-envelope-open-text"></i>
      </span>
      <span>invitation</span> </span
    >, etc.
  </p>

  <p>
    Mrs. Bennet was quite disconcerted. She could not imagine what business he could have in town so soon after his
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-flag-checkered"></i>
      </span>
      <span>arrival</span>
    </span>
    in Hertfordshire; and she began to fear that he might be always
    <span class="icon-text">
      <span class="icon">
        <i class="fas fa-plane-departure"></i>
      </span>
      <span>flying</span>
    </span>
    about from one place to another, and never settled at Netherfield as he ought to be.
  </p>
</div>