CSS Lesson #14: Icons in the Manage Consent button

Get compliant today in the European Union, United States, Canada, United Kingdom, Australia, Brazil & South Africa with the only Privacy Suite for WordPress that offers a fully-featured plugin for Worldwide Compliance.

Complianz inserts a “Manage consent” button, allowing users to change their consent preferences at any time.

Using some Custom CSS, you can add Font Awesome icons to this button to fit the style of your website even better. At the end of this article, we also explain how you can create a custom Manage Consent button.

Basic “Manage consent” button

First, let’s insert the CSS to change the default Manage Consent button to a black rectangle with white text as shown in the example image below.

Insert an icon before the text

Your website needs the Font Awesome 5 library before you can insert icons with the CSS code in this article. You can install the Font Awesome plugin to do this. Upon activation, you can use the CSS below to insert an icon to your button.

The result should look similar to this:

The properties can be changed to make the button style fit your preferences. For example, you can change the icon color separately from the Manage consent text as shown in the final result:

The result

Recent articles

The Privacy Suite for WordPress
Get compliant today with the only Privacy Suite made for WordPress


Popular articles

Join our mailing list - 8 Tips & Tricks in your inbox over the next 8 weeks!