Alter Contact Info Widget Icons Color in the Footer Area

This is a Developer Level doc.

If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.

By default, icons of the Contact Info widget (available if the Ocean Extra plugin is installed) inherit the primary colors set in your Customizer > General Options > General Styling.

If you want to use different colors for the Contact Info widget icons which is placed in the footer area, use the following CSS snippet:

/* Contact Info Icons Color Footer Widget */
#footer-widgets .contact-info-widget i {
color: #fff;

Adjust the color value per your need.

All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.

Useful Link: HTML Color Picker

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.