Hi @alfredo49,
Do you want to replace the text entirely, or rather add an icon before the text? If you just want to add the icon to a button, you could do it with CSS such as this (copy and paste to Appearance > Customize > Additional CSS):
Screenshot of what this will look like: https://ibb.co/rFKsFFj
Dismiss button:
.cc-btn.cc-dismiss:before {
font-family: FontAwesome;
font-size: 16px;
display: block;
content: '\f0e3';
}
Preferences & save preferences:
.cc-btn.cc-save.cc-show-settings:before {
font-family: FontAwesome;
font-size: 16px;
display: block;
content: '\f0e3';
}
For accept all, you can use the .cc-btn.cc-save.cc-accept-all:before with the same CSS as in the previous buttons. You can change the icon by swapping the the value of the “content” property with your desired FA icon.
Just let me know if you need anything specific.
Kind regards,
Jarno
@alfredo49
Just after I posted this, I realized that you meant the Manage Consent button instead of the banner buttons. In that case, I understand the need to hide all of the text and display an icon instead. The CSS below will achieve that (screenshot here: https://ibb.co/rvw54h7):
.cc-revoke {
text-indent: -9999px;
line-height: 0;
}
.cc-revoke:after {
font-family: FontAwesome;
font-size: 30px;
content: '\f137';
text-indent: 0;
display: block;
line-height: initial;
}
-
This reply was modified 2 years, 10 months ago by
jarnovos. Reason: correction, different element
Thxs for supporting!
But in my case i would like to replace the revoke text to the icon (not adding before)
Is possible?
Thxs
@alfredo49
I updated my previous comment with the code you will likely need. I assumed that you meant a different button 😉
Regards,
Jarno
Hin @alfredo49,
The default text is always set, meaning you can’t leave it empty. A workaround might be adding “-” in the text field, and using CSS:
.cc-revoke::before {
font-family: "Font Awesome 5 Free";
content: "\f095";
color: #fff!important;
display: inline-block;
padding-left: 5px;
vertical-align: middle;
font-weight: 900;
}
.cc-revoke {
color: #333!important; // background of your revoke button
}
.cc-revoke {
display:block;
transform:none!important;
}
An example can be found here. https://s-qvrrj8sy26agl.eu1.wpsandbox.org/
regards Aert
