---

Step 1. Drag and drop 'Social icons' element

In your Weebly editor under "Build" at the top, grab the 'Social Icons' element from the left and drop it into your site.

Once the social media icons appear, add your social media information to the appropriate social media icons.

---

Step 2. ​Open Weebly's HTML/CSS Editor

​Click on "THEME" at the top, then click on "Edit HTML/CSS" on the left.

---

Step 3. Find CSS code

We need to find the CSS class code ".wsite-social-item", as this is the CSS class that controls the styling of social media icons in all Weebly themes. Since we're using a generation 4 Weebly theme for this tutorial, the CSS class code ".wsite-social-item" is located in the file "_ui-kit.less" on the left under "Styles".

Alternatively, some Weebly themes -- especially generation 3 Weebly themes and prior house the CSS class code ".wsite-social-item" in the main CSS file either called "main.less" or "main-style.css".

Note: If you can't find the CSS class code ".wsite-social-item" anywhere, just click on your main CSS file and add the code to it.

---

Step 4. Modify CSS code

Once you've found the CSS class code ".wsite-social-item" -- or have added it -- it's time to modify it!

​For this tutorial, we want to increase the size of the social media icons to "2em", change their color to "#F622A7", change the background color to "#ffffff", and give a little padding (.5em) between the icons and edge of their new background color.

For the hover styling, all we want is the social media icons to change to the color "#A5F623".

For this theme, we will modify the CSS class code ".wsite-social item" as shown below in orange:

.wsite-social-item {
  display: inline-block !important;
  font-size: 2em; /* Changes the social media icons' size */
  background:#ffffff; /* Changes the social media icons' background color */
  color:#F622A7; /* Changes the social media icons' color */
  padding:.5em; /* Changes the padding between the icons and the edge of their background color */
  box-sizing:border-box;
  margin: 5px;
  .transition(all 300ms ease);

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }

  &:hover {
    color: fade(#A5F623, 60%) /* Changes the social media icons' hover color */
  }
}

For older Weebly themes, or if you've had to add the CSS class code ".wsite-social-item" to your CSS file, your code should now look something like this:

.wsite-social-item {
  font-size:2em; /* Changes the social media icons' size */
  background:#ffffff; /* Changes the social media icons' background color */
  padding:.5em; /* Changes the padding between the icons and the edge of their background color */
  box-sizing:border-box;
​  color:#F622A7; /* Changes the social media icons' color */
}

.wsite-social-item:hover {
  color:#A5F623; /* Changes the social media icons' hover color */
}

Click save.

---

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

---

comments powered by Disqus