Step 1. Find your new social media icons

Go to Google or Bing and type in "free social media icons". You'll find a plethora of sites offering free downloads of many different styles of social media icons.

---

Step 2. Find the size of your current social media icons

Right click on one of your current social media icons and scroll down to "Inspect element". A window should appear that will show you the size of your current social media icons.

It's important to replace your current social media icons with other social media icons of the same size. We don't want to disrupt any styling of the website.

Note: If the social media icons you downloaded are not the same size as your current social media icons, you can easily resize them in Photoscape. Also note that if you need to resize your new social media icons, be sure that they're bigger than your current social media icons. Resizing a small social media icons to a larger size will distort the picture.

---

Step 3. Open Weebly's HTML/CSS Editor

Click on "Design" at the top and then click on "Edit HTML/CSS" in the bottom-left.

---

Step 4. Import your new social media icons to weebly

Click "Add new file(s)" on the left and import your new social media icons.

Note: Be sure that the name of your new social media icon files are simple such as "facebook.png". If it isn't, simply click on the file on the left and rename it right in Weebly's code editor.

---

Step 5. add css coding

Click on "main-style.css" on the left and scroll down until you see CSS coding that resembles your current social media icons. The coding usually starts with ".wsite-social". If it's easier on your eyes, give yourself some space between each social media icon's code. For this example, we're going to replace the Facebook social media icon.

Add the orange code to the code below and add your recently uploaded social media icon's file name to the green code:

.wsite-social-facebook {background-position:0 0; background-image:url(facebook1.png);}
.wsite-social-facebook:hover {background-position:0 -25px;}
.wsite-social-facebook:active {background-position:0 -50px;}

Continue this process for the rest of your website's social media icons. If you've done it correctly, you should see your new social media icon appear below.

---

You're done! Publish your site to see your new social media icons!

---

Tips and Additional information

If you notice your social media icon disappears when you hover over it with your mouse, just change the orange code to 0px.

.wsite-social-facebook {background-position:0 0; background-image:url(facebook1.png);}
.wsite-social-facebook:hover {background-position:0 0px;}
.wsite-social-facebook:active {background-position:0 -50px;}

---

comments powered by Disqus