FONTAWESOME ICONS HOW TO
FONTAWESOME ICONS PRO
FONTAWESOME ICONS CODE

If default primary and secondary layers don’t work for you, you can swap them! Roll a natural 20 with our duotone iconsĪs mentioned above, the default opacity for the secondary layer in our duotone icons is set to 40%. The icon on the right has the opacity swapped:.In the example below, the icon on the left uses the standard implementation of.To do so, just add a fa-swap-opacity class to your code. There may be some occasions when you want to flip the opacity of a duotone icon’s layers, so that the primary layer has a 40% opacity instead of the secondary layer. Learn more Change an icon’s color, and the duotone styling remains intact Easily add color to your interface designs with our duotone icons By default the secondary layer is given an opacity of 40% so that it appears as a lighter shade of the icon’s inherited or directly set color. A duotone icon consists of a primary and secondary layer. Like all other Font Awesome icons, duotone icons automatically inherit CSS size and color. Each duotone icon consists of two layers: primary and secondary Bring your UI to life with duotone icons If you’d like to get fancy with our duotone icons–and let’s be honest, we all like to get fancy–you can use our built-in features to easily change their color, or target individual layers. Duotone works with your already established colors. This is the same icon, only the color and background have changed. This allows it to retain the same color as the primary layer, but also visually mix it with the underlying background color. By default the secondary layer is set to 40% opacity. This works out-of-the-box because our duotone icons have two layers, primary and secondary. Need the icons to work in reverse, on a dark background? You’re covered. Using icons on a light background? No problem.

FONTAWESOME ICONS PRO

The new duotone prefix joins our existing Font Awesome Pro style prefixes.

FONTAWESOME ICONS CODE

The code snippet: will pull up our bell icon in the solid style.

And the new Duotone style is… you guessed it… fad.

The new icons inherit your existing base color automatically.Īs a refresher, here are the style prefixes for Font Awesome Pro: Simply switch your code to reference the duotone icons instead and be done. Let’s say you’re building a website and are currently using the solid style of Font Awesome Pro. Whether implementing webfonts, our svgs, or our kits, the icons just work.

FONTAWESOME ICONS HOW TO

If you know how to use Font Awesome, you already know how to use our duotone icons.Īrguably the best thing about our duotone icons is that you can use them exactly the same way you would use any of our existing icon styles. Our duotone icons are now available to all Pro subscribers. And that something pretty cool–after gestating for the appropriate amount of time–has finally ripped its way into the world. Well, it turns out the answer to that question is: something pretty cool. What would happen if, instead of creating a subset of icons in a new style, we included icon-for-icon matches for each and every one of our existing symbols? That number was ultimately expanded to 600, but the goal remained the same: to supplement our existing icons with a small group that worked–by default–in two colors.īut when we actually sat down to plan out the icons, an idea latched itself to our face and forced its way into our chest. Initially a stretch goal from our 2017 Kickstarter campaign for Font Awesome Pro, Duotone was originally planned as a subset of our 200 most popular icons. We’re super excited to officially launch Duotone, the newest icon style to join the Font Awesome family. Say hello to Duotone, a beautiful new icon style now available as part of Font Awesome Pro.

Fontawesome icons