4 Font Awesome Icons Widget for Weebly Site

Icons widget helps to create an eye catching call to action panel and display any kind of information. Since there are huge icon sets available for free from various resources it is easy to showcase the needed information using a single attractive icon instead of describing with longer text. Especially font awesome icons are very good alternative to images in this context. In this article let us explore the process of creating font awesome icons widget for Weebly site.

Font Awesome Icons Widget for Weebly

Below is the widget (style 1) having 4 icons and you can add or remove the icons as you need.

Let us showcase further three more styles with variations:

Click on the below download button to get the complete code for all the styles of icons panel widget. And read on further to know how to add these widgets on your Weebly site.

Creating Icons Widget for Weebly Site

Let us take an example of creating a “Contact Us” widget with the following four options:

• Send email
• Call us
• Chat now
• Visit forum

This is a pure CSS widget where we convert simple list to an icon widget using font awesome icons. Each icons widget contains the following parts:

• Panel container (this contains all 4 items)
• Column – contains individual item
• Article – containing an icon and a heading
• Icon – font awesome icon
• H2 heading which by default uses Weebly title element’s style.

Step 1 – Defining Styles for the Icons Widget

First we define the width of column as 21% so that 4 items can fit on your Weebly theme’s width. We have removed the bullets in the lists with “list-style:none” property and each list item will have some margin (bottom and left) with left floating. You can change all of these styles to suit on your layout. Note that we have used margin 20px to create space between list elements.

/* Individual Column */
.column {
display:inline-block;
float:left;
margin:0 0 20px 20px;
list-style:none;
width:21%;
}

Next we create panels with common background color as “lightgreen” along with styles for list elements (ul and li). We use “border-radius:10px;” for creating rounded corner for panels, remove this line if you want to show square icons.

/* Panel */
#panel {
position:relative;
z-index:1;
}

#panel ul li {
text-align:center;
border:1px solid;
}

#panel ul li *{
margin:0; padding:0;
}

#panel ul li .icon {
margin-bottom:28px;
}

#panel ul li article {
display:block;
padding:30px 0 15px 0;
}

#panel ul li {
color:#464646;
background-color: lightgreen;
border-color:#D7D7D7;
border-radius: 10px;
}

#panel ul li a {
color:inherit;
}

#panel ul li:hover a {
color:#51C4BE;
}

Next step is to define the styles for the font awesome icons as below. We have used the width and height of the icon buttons as 130px, border radius as 50% to make them circle and the size of the icon as 46px. You can remove the border radius to make the icons in square format and increase / decrease the size of the icon size by changing the font size attribute.

/* Button */

.icon {
display:inline-block;
}

.icon i {
position:relative;
width:130px;
height:130px;
line-height:130px;
z-index:1;
}

.icon i, .icon i::after {
border-radius:50%;
}

.icon .fa {
font-size:46px;
}

.icon i::after {
position:absolute;
top:15px;
right:15px;
bottom:15px;
left:15px;
border:1px solid;
content:"";
z-index:-1;
}

.icon i {
color:#FFFFFF;
background-color:#51C4BE;/* IE9 Fallback */
background:linear-gradient(to top right, #256D6A, #51C4BE);
}

.icon i::after {
border-color:rgba(255,255,255,.5);
}

.icon:hover i::after {
background-color:#51C4BE;
}

#panel ul li:hover .icon i {
text-shadow:0 1px 0 #CCCCCC,0 2px 0 #333333,0 1px 0 #BBBBBB,0 4px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25)
}

#panel ul li:nth-child(1):hover .icon i::after {
background-color:#F9CD36; /* Yellow */
}

#panel ul li:nth-child(2):hover .icon i::after {
background-color:#FF7659; /* Orange */
}

#panel ul li:nth-child(3):hover .icon i::after {
background-color:#9771BD;/* Purple */
}

#panel ul li:nth-child(4):hover .icon i::after {
background-color:#F36174;/* Red */
}

Yellow, orange, purple and red colors are used for the icons hover color which can also be changed as per your need. The last step in the CSS part of the widget is to add media queries to make the widget responsive on mobile devices.

/* Media Queries */
@media screen and (max-width:750px){
#panel ul li {
display:inline-block;
float:left;
width:48.46625766871166%;
margin:0 3.06748466257669% 15px 0;}
#panel ul li:nth-child(even){
margin-right:0; clear:right;
}
}

@media screen and (max-width: 450px){
#panel ul li {
display: block;
float: none;
width: 95%;
}
}

Step 2 – Adding CSS in Weebly Site

You can download the complete source of the CSS file which is named as “icons_style.css” and upload on your Weebly site under “Theme > Edit HTML / CSS > Assets” (you can also upload the file under “Styles” section). The uploaded file path of your CSS file will be “http://yoursite.com/files/theme/icons_style.css”.  In addition to this CSS file we also need a font awesome CSS file and you need to link both files on the required page.

Now go the page you want to add the widget and link the two CSS files as below under “Pages > Choose your page > SEO Settings > Header Code” section.

<link href="/files/theme/icons_style.css" rel="stylesheet" type="text/css" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Step 3 – Adding HTML

The last step is to add the required HTML code inside the “Embed Code” element on your Weebly page. The above example is covered in “Icons Widget 1.html” which you can get from the downloaded source files. Right click and copy the source HTML code and paste it inside “Embed Code” element. Don’t forget to remove the first two CSS links from the HTML source code which are used for demo purpose. The HTML code should look like below:

<div id="panel"> 
<ul>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-envelope"></i></a>
<h2><a href="#">Send Email</a></h2>
</article>
</li>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-phone"></i></a>
<h2><a href="#">Call Us</a></h2>
</article>
</li>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-comments"></i></a>
<h2><a href="#">Chat Now</a></h2>
</article>
</li>
<li class="column">
<article><a class="icon" href="#"><i class="fa fa-group"></i></a>
<h2><a href="#">Visit Forum</a></h2>
</article>
</li>
</ul>
</div>

Customizing Icons Widget

All the required styles are defined in the “icons_style.css” file which you can customize as per your need. We have added another three examples in the source download where we used inline styles to modify the required elements by keeping the “icons_style.css” as it is.

• Use Icon Widget 2.html for different backgrounds for each panel.
• Try Icon Widget 3.html for white background panels with different gradient color icons.
• Use Icon Widget 4.html with social icons without panel border.

You can change the text / icons in HTML and refer the font awesome icons list for choosing the icon you need.