How to Replace Font Awesome Icons with CSS

How To  Tutorials  Last Updated: Layers ver. 1.5 Time to Read: 1 minute

Several Layers themes and extensions make use of icon fonts, which allow the icons to be colored and styled with CSS versus using images that cannot be easily changed. You can replace any of these icons with a different one by resetting the CSS style.

If you are new to CSS or using your browser inspector, check out How to Customize Your Site With CSS

In this example, we will replace the default shopping cart icon in the StoreKit header cart with a different one.

If we right-click the icon and Inspect it, we get the following markup:

Click the::beforeto see the icon style:

  • Icons are almost always styled using the ::before pseudo element.
  • Icons are always set using their unicode identifier.

Copy this over to DevKit/Child theme style.css or the CSS panel in the customizer.

  1. Head over to the Font Awesome icon list and search for “basket.” This should land you on the Shopping Basket icon.
  2. Click the icon link to view he detail page. At the top is the Unicode number: f291
  3. Replace the unicode number in your copied style above with the new one, taking care to leave the quotes and slash intact:

In cases where you are overriding a Layers framework icon with a Font Awesome icon, you must also declare the font-family:

To learn more about styling icons, or implementing them through custom HTML, see FontAwesome Examples