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.

---

Step 3. Open Weebly's HTML/CSS Editor

Click on "Design" at the top and then click on "Edit HTML/CSS" on the 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. Select Page Layout

Select your Weebly site's page layout on the left.

Note: If you don't know what page layout your site is using, leave the code editor and go to "Pages" at the top. You'll be able to see the page layout for each individual page. If your Weebly site uses more than one page layout, you will need to perform this tutorial for each page layout your site uses.​

---

Step 6. Remove hTML coding

Scroll down until you reach the following HTML code. Remove the orange part of the code.
​
​<table>
    <tr>
         <td >{search}</td>
         <td >{social}</td>
     </tr>
</table>

---

Step 6. Add HTML Coding

Give yourself some space and then add this following HTML code in that space:

​<ul>
  <a href="http://www.pinterest.com" target=newtab style="float:right; padding-top:22px; padding-left:5px;"><span title="Weebly Tricks on Pinterest"><b><img src="http://www.weeblytricks.weebly.com/files/theme/pinterest.png"></b></span></a>
  <a href="https://plus.google.com" target=newtab style="float:right; padding-top:22px; padding-left:5px;"><span title="Weebly Tricks on Google+"><b><img src="http://www.weeblytricks.weebly.com/files/theme/google.png"></b></span></a>
  <a href="http://www.twitter.com" target=newtab style="float:right; padding-top:22px; padding-left:5px;"><span title="Weebly Tricks on Twitter"><b><img src="http://www.weeblytricks.weebly.com/files/theme/twitter.png"></b></span></a>
<a href="http://www.facebook.com/weeblytricks" target=newtab style="float:right; padding-top:22px;"><span title="Weebly Tricks on Facebook"><b><img src="http://www.weeblytricks.weebly.com/files/theme/facebook.png"></b></span></a>
</ul>

---

Step 7. Make Social icons horizontal [if need be]

If after installing the code from Step 6. you notice that your social media icons are vertical and not horizontal, click on "main-style.css" on the left, scroll down to the code below, and delete the orange part of the code.

​#header-left table {
    float: left;
    width:1px;
    margin-left:-5px;
}

---

Step 8. customize the hTML code from step 6

This is how you customize the HTML CODE from Step 6 to your preferences. In order to make it simple, we've removed one social media icon's code (i.e., Pinterest) from the coding. Refer to Step 6. for reference if need be.

​<a href="ADD YOUR SITE'S URL HERE" target=newtab style="float:right; padding-top:22px; padding-left:5px;" ><span title="CHANGE THE HOVER MESSAGE HERE"><b><img src="ADD SOCIAL MEDIA ICON URL HERE"></b></span></a>

​Example: <a href="http://www.pinterest.com" target=newtab style="float:right; padding-top:22px; padding-left:5px;"><span title="Weebly Tricks on Pinterest"><b><img src="http://www.weeblytricks.weebly.com/files/theme/pinterest.png"></b></span></a>

---

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

---

Tips and Additional information

If you'd like your social media icons to be highlighted (i.e., turn dark to light) when someone hovers over them with their mouse, add the following code to main-style.css file at the bottom.

​.highlightit img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.9;
opacity: 0.9;
}

.highlightit:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 5;
opacity: 5;
}

---

comments powered by Disqus