Changing Social Icons Using Font Awesome
-
Hi All,
I just wanted to share that I am a user of this plugin and may have found an easy fix to help anyone who wants to change the Social Icon representation to something more specific.
In order for this to work properly, you’ll need to add the Fontawesome CSS path in the header file: <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>
There is a list of icons seen here: https://fontawesome.io/cheatsheet (All you need to do is copy the last 4 letters of the Icon you desire and replace them in the code below for the “Content” property value.)
Basically, you’d be using FontAwesome to choose your icon. All you would need to do is go into the AddToAny plugin in your WordPress, Include the social media, or other add’s necessary to display on your website, save it, then target those in the CSS.
What I did for my Facebook Icon was this:
——-*CODE*——-
a.a2a_button_facebook:before {
font-family: FontAwesome;
content: “\f09a”;
color: #000;
padding-right: 15px;
font-size: 30px;
}
a.a2a_button_facebook > img {
display: none;
}
——-*CODE*——-Pasting this code into your CSS will remove the AddToAny image for Facebook, and in it’s place will show the Font-Awesome icon “F09a” for Facebook. From there you can change the Color, Icon Size(font-size), and even the icon itself to a different icon if you so choose.
Hope this helps some people from having to place images into FTP directory ??
- The topic ‘Changing Social Icons Using Font Awesome’ is closed to new replies.