* Step 1: Common Duotone Properties: All required to make icons render reliably */.

Set the content to the Unicode value of one of our icons. Arial is a neo-grotesque sans-serif typeface designed via Robin Nicholas and Patricia Saunders. Referencing individual duotone icons works much like all CSS pseudo-element icon use.

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 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.Over the years, a wide range of variants have been released in different weights, widths and sizes, as well as matching designs for a range of non-Latin alphabets. There are four important parts to include when referencing any individual icon: Inherit Font Download Free Fonts It is a neo-grotesque or realist design, one influenced by the famous 19th century typeface Akzidenz-Grotesk and other German and Swiss designs. 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.

Inherit free font download