CSS reference - Bifrost

Icon

Our bifrost-react package uses Font Awesome icons, and you can do the same without react.

Install

There are many ways to include icons on your website, one way is to link directly to CDN hosted files:

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>

Basic usage

Then you can use the (set of free) icons:

<i class="fa-regular fa-user"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-search"></i>
<i class="fa-regular fa-user"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-search"></i>

Also see the "Styling with Font Awesome" docs

Spacing

Use .bf-icon-margin-left or .bf-icon-margin-right to add space between icon and text.

<div><i class="fa-solid fa-sun bf-icon-margin-right"></i>Sun</div>
<div>Moon<i class="fa-solid fa-moon bf-icon-margin-left"></i></div>
<div><i class="fa-solid fa-sun bf-icon-margin-right"></i>Sun</div>
<div>Moon<i class="fa-solid fa-moon bf-icon-margin-left"></i></div>

Sun

Moon

Bifrost colors

Font Awesome icons follow the current text color, which means you can use our CSS text color class names, either on a parent element or directly on the icon.

<div class="bfc-success">
  <i class="fa-solid fa-check bf-icon-margin-right"></i>Yep
</div>
<div><i class="bfc-success fa-solid fa-check bf-icon-margin-right"></i>Yep</div>
<div class="bfc-success">
  <i class="fa-solid fa-check bf-icon-margin-right"></i>Yep
</div>
<div><i class="bfc-success fa-solid fa-check bf-icon-margin-right"></i>Yep</div>

Yep

Or you can use a color from our color table.

<style>
  .my-color {
    color: var(--bfc-alert-fade-2-c);
  }
</style>
<div class="my-color">
  <i class="fa-solid fa-xmark bf-icon-margin-right"></i>Nope
</div>
<div><i class="my-color fa-solid fa-xmark bf-icon-margin-right"></i>Nope</div>
<style>
  .my-color {
    color: var(--bfc-alert-fade-2-c);
  }
</style>
<div class="my-color">
  <i class="fa-solid fa-xmark bf-icon-margin-right"></i>Nope
</div>
<div><i class="my-color fa-solid fa-xmark bf-icon-margin-right"></i>Nope</div>

Nope

Clickable icon

Avoid using onclick (or listen to click event) directly on an icon since it won't:

Look like it's clickable
Get a pointer (hand) cursor on hover
Be accessible for keyboard users

Instead wrap it inside a link (<a>) or <button>.

Also see link styling page and button styling page.

Use link when navigating to a new URL:

<a href="/css/link#bf-title-link" class="bf-title-link">
  <i class="fa-solid fa-house bf-icon-margin-right"></i>Home
</a>
<a href="/css/link#bf-title-link" class="bf-title-link">
  <i class="fa-solid fa-house bf-icon-margin-right"></i>Home
</a>

Home

Use button for any other action:

<button
  type="button"
  onclick="console.log('Editing item...')"
  class="bf-button"
>
  <i class="fa-solid fa-pencil bf-icon-margin-right"></i> Edit item
</button>
<button
  type="button"
  onclick="console.log('Editing item...')"
  class="bf-button"
>
  <i class="fa-solid fa-pencil bf-icon-margin-right"></i> Edit item
</button>

When a link (or button) contains only an icon, make sure to add an aria-label or title for screen reader support:

<a href="/css/link" aria-label="Home" class="bf-link">
  <i class="fa-solid fa-house bf-icon-margin-right"></i>
</a>
<a href="/css/link" aria-label="Home" class="bf-link">
  <i class="fa-solid fa-house bf-icon-margin-right"></i>
</a>

Same goes for buttons, and you can style a <button> as a link if you need:

<button
  type="button"
  onclick="console.log('Editing item...')"
  class="bf-link"
  aria-label="Edit item"
>
  <i class="fa-solid fa-pencil bf-icon-margin-right"></i>
</button>
<button
  type="button"
  onclick="console.log('Editing item...')"
  class="bf-link"
  aria-label="Edit item"
>
  <i class="fa-solid fa-pencil bf-icon-margin-right"></i>
</button>

Spinner

Font Awesome supplies quite a few animations you can use, but we've hand-made our own spinner animation available with .bf-icon-spinner. We recommend the duotone version of the spinner-third icon, colored with bfc-theme:

<i class="fa-duotone fa-spinner-third bf-icon-spinner bfc-theme"></i>
<i class="fa-duotone fa-spinner-third bf-icon-spinner bfc-theme"></i>

Sandbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/solid.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/regular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/js/fontawesome.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bfl-grid bf-page-padding">
  <div class="bf-inline">
    <i class="fa-regular fa-user"></i>
    <i class="fa-solid fa-user"></i>
    <i class="fa-solid fa-search"></i>
  </div>
  <div><i class="my-color fa-solid fa-xmark bf-icon-margin-right"></i>Nope</div>
  <div>
    <i class="bfc-success fa-solid fa-check bf-icon-margin-right"></i>Yep
  </div>
  <div>
    <button
      type="button"
      onclick="console.log('Editing item...')"
      class="bf-button"
    >
      <i class="fa-solid fa-pencil bf-icon-margin-right"></i> Edit item
    </button>
  </div>
</div>

Open Sandbox