How to change vector social icon image

Some themes uses vector social icon where the icon image is generated by a code. You can easily change the type of icon it display by changing the vector code.

Step1: Open the theme editor

  1. Log into Weebly
  2. Click into “design” then into “edit html/css
  3. On the left hand column click on “main_style.css
    OLD EDITOR: main_style.css is located at the top of the column
    NEW EDITOR: main_style.css is located directly BELOW “ASSETS

Step2: Locate Social Icon Code in Main_style.css

Here scroll down the page till you find these codes:

.wsite-social-facebook span.wsite-social-item-inner:after{content: "\f09a";}
.wsite-social-pinterest span.wsite-social-item-inner:after{content: "\f0d3";}
.wsite-social-twitter span.wsite-social-item-inner:after{content: "\f099";}
.wsite-social-linkedin span.wsite-social-item-inner:after{content: "\f0e1";}
.wsite-social-rss span.wsite-social-item-inner:after{content: "\f09e";}
.wsite-social-flickr span.wsite-social-item-inner:after{content: "\f16e";}
.wsite-social-vimeo span.wsite-social-item-inner:after{content: "\f194";}
.wsite-social-plus span.wsite-social-item-inner:after{content: "\f0d5";}
.wsite-social-youtube span.wsite-social-item-inner:after{content: "\f167";}
.wsite-social-mail span.wsite-social-item-inner:after{content: "\f003";}

The BOLD code show you what this code controls. For example,

.wsite-social-facebook span.wsite-social-item-inner:after{content: "\f09a";}

It is for the Facebook social icon

Step3: Change social icon vector image

You can re-purpose some of the default icons you don’t use to display a different social network. Here simply change the vector code to change the icon image.

Choose your social icon
First we want to choose the social icon you want to use:


Click to enlarge Image

Choose the icon you don’t need

Here we will change the code for the social icon you are not currently using. For example, we will change the LINKEDIN social icon to Pinterest:

.wsite-social-linkedin span.wsite-social-item-inner:after{content: "\f0e1";}

The code for Pinterest is

content: "\f231";

So the code will then look like this:

.wsite-social-linkedin span.wsite-social-item-inner:after{content: "\f231";}

Step4: Save your change, exit the theme editor & re-publish your site

Tags: , , , , , , ,