Tutorial Stats
How To Create Custom Social Media Icons In Weebly
Tutorial Description
The amount of social media networks keeps growing, but Weebly's social media icon selection does not. That's a bit of a problem, I'd say.
Fret not, as this tutorial will show you how to very easily create your own custom social media icons in your Weebly site. We'll be using Socicons for this tutorial.
Fret not, as this tutorial will show you how to very easily create your own custom social media icons in your Weebly site. We'll be using Socicons for this tutorial.
SHOW MORE
Tutorial
Step 1. Open Weebly's HTML/CSS Editor
At the top, click on 'Theme', and on the bottom-left, click on 'Edit HTML/CSS'.
Step 2. Add HTML Link Tag
On the left under "HEADER TYPE", select the first page layout. On the right, within the "<head></head>" HTML tags, add the following HTML link tag:
<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">
Note: Repeat this step for all additional page layouts your theme has.
<link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?u8vidh">
Note: Repeat this step for all additional page layouts your theme has.
Step 3. Add CSS Codes
On the left under "STYLES", select "main.less". On the right, scroll down to the area that houses your theme's social media icons (optional) and add the following CSS codes:
/* Custom Icons */
.icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.icons > a {
font-size: 32px;
padding: 10px;
margin: 5px;
box-sizing: border-box;
background: #00aeff;
color: #000;
}
.icons > a:hover {
background: #D000FF;
}
Note: The CSS codes above give style to your custom social media icons. Adjust the style to your liking now or later.
Click "SAVE".
/* Custom Icons */
.icons {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.icons > a {
font-size: 32px;
padding: 10px;
margin: 5px;
box-sizing: border-box;
background: #00aeff;
color: #000;
}
.icons > a:hover {
background: #D000FF;
}
Note: The CSS codes above give style to your custom social media icons. Adjust the style to your liking now or later.
Click "SAVE".
step 4. Add HTML Codes
Once you're back in the Weebly Editor, on the left, grab the "Embed Code" element and add it to your site.
Now add the HTML code below to the "Embed Code" element:
<div class="icons">
<a href="" target="_blank" class="socicon-snapchat"></a>
<a href="" target="_blank" class="socicon-ebay"></a>
<a href="" target="_blank" class="socicon-whatsapp"></a>
<a href="" target="_blank" class="socicon-googlehangouts"></a>
<a href="" target="_blank" class="socicon-playstation"></a>
<a href="" target="_blank" class="socicon-spotify"></a>
<a href="" target="_blank" class="socicon-messenger"></a>
<a href="" target="_blank" class="socicon-shopify"></a>
<a href="" target="_blank" class="socicon-googleplaymusic"></a>
<a href="" target="_blank" class="socicon-twitch"></a>
</div>
Now add the HTML code below to the "Embed Code" element:
<div class="icons">
<a href="" target="_blank" class="socicon-snapchat"></a>
<a href="" target="_blank" class="socicon-ebay"></a>
<a href="" target="_blank" class="socicon-whatsapp"></a>
<a href="" target="_blank" class="socicon-googlehangouts"></a>
<a href="" target="_blank" class="socicon-playstation"></a>
<a href="" target="_blank" class="socicon-spotify"></a>
<a href="" target="_blank" class="socicon-messenger"></a>
<a href="" target="_blank" class="socicon-shopify"></a>
<a href="" target="_blank" class="socicon-googleplaymusic"></a>
<a href="" target="_blank" class="socicon-twitch"></a>
</div>
Step 5. Find Your Icons
Go to Socicons.com and choose a social media icon. For this example, we'll be using Facebook Messenger's icon.
Copy the part of the icon that says class="socicon-messenger".
Copy the part of the icon that says class="socicon-messenger".
Step 6. Add Your Icons
Go back to the Weebly Editor and make the following change to the HTML code you added in step 4 as shown below in bold:
<div class="icons">
<a href="" target="_blank" class="socicon-snapchat"></a>
<a href="" target="_blank" class="socicon-ebay"></a>
<a href="" target="_blank" class="socicon-whatsapp"></a>
<a href="" target="_blank" class="socicon-googlehangouts"></a>
<a href="" target="_blank" class="socicon-playstation"></a>
<a href="" target="_blank" class="socicon-spotify"></a>
<a href="" target="_blank" class="socicon-messenger"></a>
<a href="" target="_blank" class="socicon-shopify"></a>
<a href="" target="_blank" class="socicon-googleplaymusic"></a>
<a href="" target="_blank" class="socicon-twitch"></a>
</div>
Note: Simply repeat this step for each additional custom icon for your website. You can add/remove icons by adding/removing individual active links (e.g., <a href="" target="_blank" class="socicon-twitch"></a>)
<div class="icons">
<a href="" target="_blank" class="socicon-snapchat"></a>
<a href="" target="_blank" class="socicon-ebay"></a>
<a href="" target="_blank" class="socicon-whatsapp"></a>
<a href="" target="_blank" class="socicon-googlehangouts"></a>
<a href="" target="_blank" class="socicon-playstation"></a>
<a href="" target="_blank" class="socicon-spotify"></a>
<a href="" target="_blank" class="socicon-messenger"></a>
<a href="" target="_blank" class="socicon-shopify"></a>
<a href="" target="_blank" class="socicon-googleplaymusic"></a>
<a href="" target="_blank" class="socicon-twitch"></a>
</div>
Note: Simply repeat this step for each additional custom icon for your website. You can add/remove icons by adding/removing individual active links (e.g., <a href="" target="_blank" class="socicon-twitch"></a>)
step 7. Link your Icons
Linking your icons is as simple as adding the URL you want your icon to link to to the HTML code you added in step 6 as shown below in bold:
<div class="icons">
<a href="" target="_blank" class="socicon-snapchat"></a>
<a href="" target="_blank" class="socicon-ebay"></a>
<a href="" target="_blank" class="socicon-whatsapp"></a>
<a href="" target="_blank" class="socicon-googlehangouts"></a>
<a href="" target="_blank" class="socicon-playstation"></a>
<a href="" target="_blank" class="socicon-spotify"></a>
<a href="https://www.facebook.com/editortricks/" target="_blank" class="socicon-messenger"></a>
<a href="" target="_blank" class="socicon-shopify"></a>
<a href="" target="_blank" class="socicon-googleplaymusic"></a>
<a href="" target="_blank" class="socicon-twitch"></a>
</div>
Note: Repeat this step for all additional custom icons your website has.
<div class="icons">
<a href="" target="_blank" class="socicon-snapchat"></a>
<a href="" target="_blank" class="socicon-ebay"></a>
<a href="" target="_blank" class="socicon-whatsapp"></a>
<a href="" target="_blank" class="socicon-googlehangouts"></a>
<a href="" target="_blank" class="socicon-playstation"></a>
<a href="" target="_blank" class="socicon-spotify"></a>
<a href="https://www.facebook.com/editortricks/" target="_blank" class="socicon-messenger"></a>
<a href="" target="_blank" class="socicon-shopify"></a>
<a href="" target="_blank" class="socicon-googleplaymusic"></a>
<a href="" target="_blank" class="socicon-twitch"></a>
</div>
Note: Repeat this step for all additional custom icons your website has.
You're done! Publish your website to see your new custom social media icons!
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
