Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to Create Floating Fixed Icons

How to Create Floating Fixed Icons

In this tutorial we will show you how to add fixed floating icons on the left side of your website. You can make these icons into social links, shopping cart, support tab or anything you want to draw your audience to.

First log into your Weebly and access the code editor by clicking on “design” and into “edit html/css”.

Insert HTML Code

The customization will take place in the html page and the css page. Weebly themes have many different page layout, so here you can choose which page layout you want to insert the floating icons. For example, if I want to insert the floating icons in the Tall Header layout, I will click on “tall-header.html”.

Once you click open the html page for the page layout you selected, scroll down to the bottom of the page till you see </body>

Directly above </body> is where we will insert this code:

 

<div class=”fixed-icons”>

<ul id=”float-icons” class=”clearfix”>
<li><a href=”#” id=”icon1″>icon1</a></li>
<li><a href=”#” id=”icon2″>icon2</a></li>
<li><a href=”#” id=”icon3″>icon3</a></li>
<li><a href=”#” id=”icon4″>icon4</a></li>
</ul>

</div>

Insert link

Insert your url link here a href=”#”  by replacing the “#”

For example, if I want the icon to link to DivTag, here is how it will look

a href=”http://divtagtemplates.com”

Delete unused icons

The default code allow you to have 4 icons. Each icon code

<li><a href=”#” id=”icon1“>icon1</a></li>

have an id. This id MUST be unique. Here we simply give it a number after “icon”.

You can take out unused icons by deleting the icons code like this:

<li><a href=”#” id=”icon1″>icon1</a></li>

Insert CSS Code

Now that we have the icon inserted in the html page, we can insert the css codes. Click on main_style.css to open the CSS editing page. Scroll down to the bottom of the page where you see a blank space, than insert this code:

.fixed-icons{
background: transparent;
width: 25px;
position: fixed;
top: 25%;
left: 10px;
}

#float-icons{
background:transparent;
margin:0;
padding:0;
width:100%;
}

#float-icons li{
float:left;
list-style-type:none;
}

#float-icons a{
display:block;
margin:3px 0;
padding:0;
height:48px;
width:48px;
text-indent:-9999px;
opacity: 1;
}

#float-icons a:hover{
opacity: 0.6;
}

#float-icons li a#icon1{background: url(icon1.png) no-repeat;}

#float-icons li a#icon2{background: url(icon2.png) no-repeat;}

#float-icons li a#icon3{background: url(icon3.png) no-repeat;}

#float-icons li a#icon4{background: url(icon4.png) no-repeat;}

 

Upload Image File

Now you need the images for your icon. This tutorial give you 48px by 48px icon image. You can use these images as template to create different icons of your own. Make sure you save your own icons in the SAME image file name and SAME image format. Otherwise the icons will not show up.

Download the icons here:

Download Icons
Unzip the file to access the icon images inside. Upload the images in your code editor by clicking on “Add file(s)“.

 

Save & Publish

Save & publish