Where to copy/paste this code?
NoteSince Customizr 3.3.1 (Customizr-Pro 1.0.12), because of new wp themes guidelines, you cannot use single (double) quotes in the Custom CSS in customizer. Use a Child Theme.
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then We strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.
/* START OF change the FB icon to blue style */
a.icon-facebook:before {
background-color: #3b5998;
border-radius: 2px;
color: white;
padding: 4px 0 0 2px;
position: relative;
text-shadow: none;
top: 4px;
}
a.icon-facebook {
position: relative;
top: -4px;
}
/* END OF change the FB icon to blue style */
Credit: @acub
/* START OF change the FB icon to blue style */
a.icon-facebook:before {
content: '\f203';
color: #3B5998;
}
/* END OF change the FB icon to blue style */
Credit: @Dennis Charron
6 thoughts on “Change the FB icon to Blue style”
Hey guys,
i used the
/* Change the FB icon to white f over (official) blue box */
a.icon-facebook:before {
content: ‘\f203’;
color: #3B5998;
}
but the outcome is that the “F” turned to blue colour but there is no white “F” over blue box.
please help
Did you try the original snippet code? The code from Denis above is incorrect to achieve what you want.
Is it possible to make the button bigger? And change the verbiage upon hover from “Follow me on Facebook” to “Follow G.R.A.C.E. on Facebook.”
To change the size I have tried:
.social-icon.icon-facebook:before {
width: 30px;
height: 30px;
background-size: 30px 30px;
}
and
.social-icon.icon-facebook {
width: 30px;
height: 30px;
background-size: 30px 30px;
}
Sorry I missed this Stacey. Did you resolve it? There are snippets to fix these:
Icon size
Follow me
You’re correct, though I thought it was worth including the remainder of the CSS in order that readers can see what else was possible with the SI’s.
Thanks for your input.
Your solution works but I think found another (simpler?) one:
/* Change the FB icon to white f over (official) blue box */ a.icon-facebook:before { content: '\f203'; color: #3B5998; }