Icons
CFA Institute Brand Icon Set
Formatting
Use the cfaicon-*
class name for a particular icon on span
tags.
Colors, Borders, and Backgrounds
- To add color to an icon, add a color class along with the icon class list.
-
p_blue
,p_green
,p_purple
,p_coolgray10
,s_bgblue
,s_purple
,s_darkblue
,s_red
,t_darkorange
, andwhite
are valid brand/WCAG-safe color classes. - The default icon color is the same as text.
-
- To add a circular border to an icon, add the
border
class along with the icon class. - For a solid background, add the
solid
class along with the icon class. - Current acceptable color classes for borders and solid backgrounds are:
p_blue
,p_green
,p_purple
,p_coolgray10
,s_bgblue
,s_purple
,s_darkblue
,s_red
, andt_darkorange
. - For solid backgrounds, the icon itself will always be white.
Examples:
cfaicon-x s_red
cfaicon-checkmark p_green
cfaicon-hourglass border p_green
cfaicon-subtract solid p_coolgray10