![]() Are you using the duotone-specific fa-duotone style prefix?.Doh! The icon I want to use isn't showing up in duotone style! It's recommended only for those who can't control the final markup of their site/project as well as ninjas who want complete control over their markup. Doing so is even more complicated than the base difficulty of rendering icons with CSS pseudo-elements. Yes, the duotone icon style can be used alongside CSS pseudo-elements. CSS Custom PropertyĪny valid CSS color value (opens new window)Ĭan I use Duotone Icons by using CSS pseudo-elements? Define your own values for the following properties to override and customize Font Awesome's defaults. We've added CSS custom properties (opens new window) to make customizing easier and more efficient. (making an icon's primary layer have the default opacity of 40% rather than its secondary layer) Swap the default opacity of each layer in a duotone icon ![]() Get up to speed on how best to make some, and how to use them once they're in your Kit. They now have layers! You can add your very own duotone creations to a Kit if you have a Pro-level plan. Test layer colors together to make sure they handle color-blindness (opens new window) scenarios well.Test layer colors (opens new window) together to make sure they have enough color contrast (opens new window).Render duotone style icons at larger sizes (2x your base type size is a good starting point).Some tips for improving legibility and accessibility: In addition to that, the colors and opacity you choose for each icon's layers can also affect their legibility. Since they are more complex visually, duotone icons may be harder to read at smaller sizes. Accessibility Best Practicesīecause duotone icons are made up of two layers with different color values, they can be more like illustrations than other Font Awesome styles and need extra care for accessibility. We've documented some of the ways you can define them within your project. ![]() CSS custom properties (opens new window) are still a pretty new thing for most folks.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |