Skip to content

Glyphs

We are using Font Awesome for glyphs on the Bridge School Wordpress sites. The glyphs can be used for any icons that are needed in the site. The Font Awesome icons are made available by including a Font Awesome kit. To manage the kit, login to the Font Awesome site with the credentials in KeePass.

Including the Font Awesome kit

The Font Awesome kit can be included by adding the following code to the <head> tag of the Wordpress site:

<script src="https://kit.fontawesome.com/fe92eeab71.js" crossorigin="anonymous"></script>

Note

Note that the Font Awesome kit we are using only has access to the set of free icons (not any of the others).

Using icons

Once included, icons from the Font Awesome kit can be rendered in two ways.

HTML

You can include icons in HTML by leveraging the appropriate classes. This will look something like the following:

<i class="fa-solid fa-bell"></i>

The proper classes to use can be found by searching for the desired icon on the Font Awesome site and looking at the icon details.

CSS

Generally speaking, the HTML method should be preferred. However, if needed, icons can also be rendered directly from CSS (e.g. if you want to dynamically swap an icon on hover). To render an icon via CSS, you'll need to leverage a pseudo-class that supports the content attribute (such as ::before). Once you have your pseudo-class created in the CSS, you'll need to add two things.

  • add a content attribute to your CSS rule and supply the Unicode code point for the glyph you want to render (making sure to escape the sequence with a \). As with the HTML method, the Unicode for the glyph can be found by looking up the desired icon on the Font Awesome site.
  • add a font attribute to your CSS rule and reference the Font Awesome CSS variable specific to the Font Awesome style for the icon you want to render. The Font Awesome site has a reference for icon styles and their associated CSS variables. This ensures that the correct font and font-weight are used.

Putting it all together, you'll have something like the following:

.some-class::before {
  content: "\f0fe";
  font: var(--fa-font-solid);
}

Customizing

Since Font Awesome icons are, in fact, just glyphs in a font file, they can be styled like any other font via CSS (just don't change the font, font-family, or font-weight attributes):

.some-class::before {
  content: "\f0fe";
  font: var(--fa-font-solid);
  color: red;
  font-size: 1.4rem;
}
or

<i class="my-element fa-solid fa-bell"></i>

.my-element {
  color: red;
  font-size: 1.4rem;
}