This tutorial will show you how to change the default social media icons Weebly has provide for your theme.
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:
"I write a review very infrequently, but Weeblytricks deserves one. Chris went above and beyond to make sure he understood the scope of what we wanted and provided a great product in a very timely manner. Will use again and would recommend!" - Arthur, 8/17/17
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.