By default, all our WordPress themes (both Premium and some of the Free versions with social icons) uses the FontAwesome icons to display social icons in header, footer, and widgets.
In some cases you may want to replace these icons with custom images as background (example above). It will require a code change. Here are instruction how it can be done:
1. Navigate to Admin Panel -> Left Menu -> Appearance -> Theme Editor
2. Open style.css
3. Find and Replace the following code:
.facebook16:before {
content: “\f09a”;
}
.facebook32:before {
content: “\f082”;
}
with:
.facebook16,
.facebook32 {
width:48px !important;
height:48px !important;
background-image:url(‘https://yoursite.com/facebook-icon.png’);
}
It will replace the default icon for facebook with a custom image (screenshot above).
You can change the width and height values with any other value depending on the width/height of your social icons.
4. Do the same change for other social icons CSS classes:
- .google16 and .google32
- .instagram16 and .instagram32
- .linkedin16 and .linkedin32
- .rss16 and .rss32
- .tumblr16 and .tumblr32
- .twitter16 and .twitter32
- .youtube16 and .youtube32
- .pinterest16 and .pinterest32
- .vk16 and .vk32
- .flickr16 and .flickr32
- .vine16 and .vine32
5. Save changes to style.css and refresh