Font Awesome icons

When to use

Font Awesome is a commercial icon service that allows us to use scalable vector icons on our pages. Basically, this means we can add icons to our pages and they will look good in any size and on any device. These icons can enhance the user experience and visual appeal of your site.

The Font Awesome collection includes many types of icons. You might want to try:

  • Shapes/artifacts: book
  • UX elements: external link
  • Logos: Facebook

We use the book icon in our examples below.

Basic usage:

[fa type="solid" icon="book"]

  1. Look-up the name of the icon in the Font Awesome database by going to: http://fontawesome.com/v6.0/icons/
  2. Search and click on the icon you want. There you will see that the name of the selected icon is above it, for example: address-book
  3. Select the type of icon you want to use, the options are solid, regular, light, duotone, thin, and brands.
  4. Add your shortened code into the short code formula: [fa type="solid" icon="address-book"]

Type options

  • Solid: [fa type="solid" icon="address-book" ]
  • Regular: [fa type="regular" icon="address-book" ]
  • Light: [fa type="light" icon="address-book" ]
  • Duotone: [fa type="duotone" icon="address-book" ]
  • Thin: [fa type="thin" icon="address-book" ]
  • Brands: [fa type="brands" icon="tiktok" ]

Optional attributes: color, size, stacked

By default, your icon will inherit the text styling of the adjacent text. Often, you will want the icons to stand-out. Luckily, the Web Team gurus have added some of these features to the shortcode as optional attributes.

Color

The color attribute changes the color of the icon. Right now, we support three colors. Here are examples for book :

  • A blue book: [fa type="solid" icon="book" color="blue"]
  • A green book: [fa type="solid" icon="book" color="green"]
  • An orange book: [fa type="solid" icon="book" color="orange"]

Example in use: Social media icons on IAS sidebar

Size

The size attribute changes the size of the icon. We support the default size and 9 more using the size attribute from 2 to 10.

  • Default [fa type="solid" icon="book"]
  • Size 2: [fa type="solid" icon="book" size="2"]
  • Size 3: [fa type="solid" icon="book" size="3"]
  • Size 4: [fa type="solid" icon="book" size="4"]

Example in use: Social media icons on IAS sidebar

Stacked

The stacked attribute lets you enhance the icon even more by centering the icon in a circle or a square. This can be combined with the color and size attributes to great effect.

  • Book in a circle: [fa type="solid" icon="book" stacked="circle"]
  • Book in a square: [fa type="solid" icon="book" stacked="square"]
  • Bigger book in a green square: [fa type="solid" icon="book" stacked="square" size="2" color="green"]

Example in use: FYI home page

Using Font Awesome icons in links

Developers commonly use Font Awesome icons to identify the purpose of hyperlinks. For example, sometimes they will place an envelope before an email address or an external link symbol after an external link. As icons inherit link styling, a neat effect can be achieved by wrapping the icon in the anchor tag. Consider the following examples for an external link:

Icon outside the anchor element:

Code: <a href="http://www.google.com">Google</a> [fa type="solid" icon="external-link"]
Rendering: Google

Icon inside the anchor element:

Code: <a href=”http://www.google.com”>Google [fa type="solid" icon="external-link"]</a>
Rendering: Google

Example in use: European Studies Collections and Services