How to Add Social Icons to Weebly

Feb 2, 2019 | Weebly Tutorials

This tutorial explains how to add social media icons to Weebly templates designed by Albemarle PR after 2016. We recommend that you contact us for assistance with adding icons. If you feel comfortable modifying HTML, the code for adding your icons is below.

Step 1: From your Weebly Dasbhoard, select the Page where you want your icons to appear and then go to the Build tab.

Step 2: Select the Embed Code widget and drag it to the space where you’d like your icons to appear.

Embed Code Widget

Step 3: Click the Edit Custom HTML box. Paste your custom HTML code into the box (code samples below.)

HTML Weebly Widget

Your icons will display as cutoff circles while you’re viewing them from your Weebly editor. When you view the published version of your site, you’ll see the circles with your icons.

Mandatory Code

>>Download Weebly Icon Code Sample<<


Weebly’s HTML code box collapses as you try to type into it, so it’s easier to work on your code using a desktop text editor. Do not use Microsoft Word because it can add extra code that changes the formatting of your web design. Notepad on Windows is recommended.

If you hover your mouse over the Embed Code widget, you’ll see an arrow. You can use this to duplicate the code box and place it somewhere else on the same page or to a completely different page.

Copy Weebly Embed Code