Website Building » Weebly » How Do I Change the Color of My Social Media Icons on Weebly?

How Do I Change the Color of My Social Media Icons on Weebly?

Last updated on December 30, 2022 @ 6:40 am

There are a few different ways that you can change the color of your social media icons on Weebly. One way is to use the built in customization options that Weebly provides.

To do this, simply go to the “Design” tab and then click on “Customize Theme.” From here, you will be able to adjust the colors of various elements on your site, including your social media icons.

Another way to change the color of your social media icons is to use HTML. This is a more advanced option, but it can be very useful if you want to have complete control over the look and feel of your site. To do this, simply go to the “Edit HTML/CSS” tab and then insert the following code into the “Head” section:

<style>social-icon {
fill: #FFFFFF;
/* Change this to the color that you want */
}
</style>

You can also use CSS to change the color of your social media icons. CSS is similar to HTML, but it is a more specialized language that is used for styling web pages. To use CSS, simply go to the “Edit HTML/CSS” tab and then insert the following code into the “Head” section:

<style>social-icon {
/* Selector for social icons */
 
fill: #FFFFFF;
/* Change this value to whatever color you want */ 
 
transition: fill 0.25s ease;  
/* Smooth out the color change transition */
}
 
.social-icon:hover {
/* When you hover over a social icon */
 
fill: #000000;
/* Change its color to something else */
 
</style>
Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.