DOWNLOAD INHERIT FONT FAMILY HOW TO

Set the default opacity levels and colors for each layer of the duotone icon.Set the font-family to Font Awesome 5 Duotone, the font-weight to 900, and add positioning styles for the pseudo-element.Add styling to element that will contain the pseudo-element to support positioning.Again, it’s best to get this out of the way first in your CSS so that your icon definitions become simple. There are shared CSS properties, which are unique to the duotone style, that all duotone icons will need.

Using CSS pseudo-elements to render duotone icons follows a similar setup, but requires the use of both the ::before and ::after pseudo-elements along with more styling setup. Using CSS Pseudo-elements with Duotone Icons

DOWNLOAD INHERIT FONT FAMILY HOW TO

Need a more hands-on example of how to do this? Here's a Codepen demo showing how to render icons of all styles (opens new window) via CSS Pseudo-elements with our Web Fonts-based Framework. You may find our cheatsheet handy for finding and copying those font-familyįont Awesome 5 Free or Font Awesome 5 Pro (for pro users) Set the content to the Unicode value of one of our icons.Set the font-weight to the right weight for the style you want to use (see style table).Set the font-family to the right family for the icons you want to use (see family table below).Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step.There are four important parts to include when referencing any individual icon:

It's best to get this out of the way first in your CSS so that your icon definitions become simple. Firstly, there are some common CSS properties that apply to all icons.

Download inherit font family