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>

Basic usage

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

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.

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.

Or you can use a color from our color table.

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:

Use button for any other action:

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

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

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>