Font Awesome Pro Duotone icons

If you've enabled Font Awesome Pro and the Duotone Icon set, you can customize the two colors of Duotone icons.

Note

The secondary icon's color will automatically have reduced opacity. Also, Duotone icons don't have different hover colors.

Where the duotone color settings appear and how the icons appear when these colors aren't set depends on the module.

ModuleButton behavior
AccordionSet Duotone icon colors in the Icon section on the Style tab. If the Duotone icon color isn't set, and for other icons, color comes from the Text color setting in the Label section on the Style tab. If Text color isn't set, then the color of the label and the icon comes from the accent color set by your theme.
ButtonSet Duotone icon colors in the Icon section of the Style tab. If the Duotone icon color isn't set, and for other icons, color comes from the Text color setting in the Text section on the Style tab.
Call to ActionSet Duotone icon colors in the Button icon section on the Button tab. The settings appear when you choose a Duotone icon. Other icons are controlled by the Button text color setting in the Button text section.
CalloutSet Duotone icon colors in the Icon colors section on the Image tab. You must select a Duotone icon for these settings to appear. Duotone icons are grayscale until the primary and secondary Duotone colors are set. Other icons are controlled by the Heading color setting in the Heading section on the Style tab. If that isn't set, color comes from your theme's heading color setting.
Contact Form, Subscribe FormSet Duotone icon colors in the Button icon section on the Button tab. By default, the Duotone colors are grayscale. Other icons are controlled by the Button text color setting in the Button text section on the Button tab.
Content SliderSet Duotone icon colors in the Button icon section on the Link tab of individual items. If the Duotone icon color isn't set, the icon appears in greyscale. Other icons are controlled by the Button text color setting in the Button text section of the Link tab.
IconSet Duotone icon colors in the Icon colors section on the Style tab. You must select a Duotone icon for these settings to appear. Duotone and other icons take on the text color set by your theme until specific icon colors are set.
Icon GroupSet Duotone icon colors in the Colors section on the Style tab of individual icons. You must select a Duotone icon for these settings to appear. If colors aren't set for the individual icon, they are controlled by the Color setting in the Icon colors section on the Style tab in the main module.
Last updated on