ComputoIT Solution

Wednesday, 13 May 2015

How to Add Font-awesome Social Icons in Bootsrap 3 framework

Hi, I’m going to show you how to create bootstrap 3 social media icons without images. Yes! We are going to use an icon font library called Font Awesome. It is a scalable vector icon font which is supported by all modern browsers and IE version of 8 or above. It can be used to add social media buttons (ex., Login with Facebook button) or social media icons for websites without images. Also it’s fully compatible with Twitter Bootstrap 3 and we’ll see how to use it for adding social media icons in bootstrap websites.

Did you see the tiny round social media icons in the above image? Awesome isn’t it? Those are css social media icons without using any images. Also they are fully customizable by their size, color and effects, hence the possibilities are unlimited. All we have to do is style the icons with little bit of css code. Font Awesome is not only limited to bootstrap sites and you can use it on any other types of sites built in html/css websites, wordpress blogs etc. Adding the social media icons for websites not built with bootstrap css framework would be the same as the procedure given in this post.

Here in Koding Made Simple we have constantly discussed about creating css buttons without images and customizing bootstrap framework components. I strongly recommend you to read this post on creating css social media icons using font awesome.

Bootstrap 3 Social Media Icons for Websites

First let’s include the required bootstrap and font awesome files. You can download and use them locally or load it directly from CDN, which is recommended. For this tutorial sake, I stick to link them from max cdn. Pretty much like any other css stylesheets, you have to link them within the <head></head> section of the html file.

<head>
    <title>Bootstrap 3 Social Media Icons Tutorial</title>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Load Bootstrap css-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!--load font awesome-->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>

Having added the required css files, we’ll insert the social icons into the page with html markup. The font awesome icon classes should be wrapped either inside <i></i> tag or <span></span> tag.

I have given the code for around 20 popular css social media icons and if you want it for some other brands not mentioned here, use it similarly with their corresponding classes. To see the complete list of social media icons available goto http://fontawesome.io and in the top menu select icons >> brand icons.

I’m going to create round social media icons for bootstrap 3 as they are always lucrative. And they will be of medium gray in color with a hover transition to their respective brand colors.

HTML Code for Bootstrap Social Media Icons

Here goes the html code for bootstrap social media icons. Add them in an unordered list.

<div class="social">
    <ul>
        <li><a href="#"><i class="fa fa-lg fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-google-plus"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-github"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-pinterest"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-flickr"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-vimeo-square"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-stack-overflow"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-dropbox"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-tumblr"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-dribbble"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-skype"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-stack-exchange"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-youtube"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-xing"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-rss"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-foursquare"></i></a></li>
        <li><a href="#"><i class="fa fa-lg fa-youtube-play"></i></a></li>
    </ul>
</div>

Now we’ll get something like this...

Hmm... Not looking good. We have to add css code cleverly to style them.

CSS Code for Bootstrap Social Media Icons

As we have added the icons in an unordered list, it got stacked one by one as a bulleted list. We have to strip off the bullet points and should align the icons side-by-side with little bit of padding. Here goes it’s css code.

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

Next I’ll change the text & background colors and make it round. Also I’ll apply some mild transition effect for smooth mouse hover.

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

Now our bootstrap social media buttons are looking really nice. But we are not yet done.

Still all our bootstrap 3 social media icons will be the same old gray color on hover. We have to change their backgrounds to their brand logo colors.

Here goes the css code.

.social .fa-facebook:hover { /* round facebook icon*/
    background: #4060A5;
}

.social .fa-twitter:hover { /* round twitter icon*/
    background: #00ABE3;
}

.social .fa-google-plus:hover { /* round google plus icon*/
    background: #e64522;
}

.social .fa-github:hover { /* round github icon*/
    background: #343434;
}

.social .fa-pinterest:hover { /* round pinterest icon*/
    background: #cb2027;
}

.social .fa-linkedin:hover { /* round linkedin icon*/
    background: #0094BC;
}

.social .fa-flickr:hover { /* round flickr icon*/
    background: #FF57AE;
}

.social .fa-instagram:hover { /* round instagram icon*/
    background: #375989;
}

.social .fa-vimeo-square:hover { /* round vimeo square icon*/
    background: #83DAEB;
}

.social .fa-stack-overflow:hover { /* round stack overflow icon*/
    background: #FEA501;
}

.social .fa-dropbox:hover { /* round dropbox icon*/
    background: #017FE5;
}

.social .fa-tumblr:hover { /* round tumblr icon*/
    background: #3a5876;
}

.social .fa-dribbble:hover { /* round dribble icon*/
    background: #F46899;
}

.social .fa-skype:hover { /* round skype icon*/
    background: #00C6FF;
}

.social .fa-stack-exchange:hover { /* round stack exchange icon*/
    background: #4D86C9;
}

.social .fa-youtube:hover { /* round youtube icon*/
    background: #FF1F25;
}

.social .fa-xing:hover { /* round xing icon*/
    background: #005C5E;
}

.social .fa-rss:hover { /* round rss icon*/
    background: #e88845;
}

.social .fa-foursquare:hover { /* round foursquare icon*/
    background: #09B9E0;
}

.social .fa-youtube-play:hover { /* round youtube play button icon*/
    background: #DF192A;
}

Well. Our social media icons for bootstrap 3 now looks very colorful on mouse hover.

Here is the complete css code for the social media icons style we have created.

.social {
    margin: 0;
    padding: 0;
}

.social ul {
    margin: 0;
    padding: 5px;
}

.social ul li {
    margin: 5px;
    list-style: none outside none;
    display: inline-block;
}

.social i {
    width: 40px;
    height: 40px;
    color: #FFF;
    background-color: #909AA0;
    font-size: 22px;
    text-align:center;
    padding-top: 12px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social i:hover {
    color: #FFF;
    text-decoration: none;
    transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
}

.social .fa-facebook:hover {
    background: #4060A5;
}

.social .fa-twitter:hover {
    background: #00ABE3;
}

.social .fa-google-plus:hover {
    background: #e64522;
}

.social .fa-github:hover {
    background: #343434;
}

.social .fa-pinterest:hover {
    background: #cb2027;
}

.social .fa-linkedin:hover {
    background: #0094BC;
}

.social .fa-flickr:hover {
    background: #FF57AE;
}

.social .fa-instagram:hover {
    background: #375989;
}

.social .fa-vimeo-square:hover {
    background: #83DAEB;
}

.social .fa-stack-overflow:hover {
    background: #FEA501;
}

.social .fa-dropbox:hover {
    background: #017FE5;
}

.social .fa-tumblr:hover {
    background: #3a5876;
}

.social .fa-dribbble:hover {
    background: #F46899;
}

.social .fa-skype:hover {
    background: #00C6FF;
}

.social .fa-stack-exchange:hover {
    background: #4D86C9;
}

.social .fa-youtube:hover {
    background: #FF1F25;
}

.social .fa-xing:hover {
    background: #005C5E;
}

.social .fa-rss:hover {
    background: #e88845;
}

.social .fa-foursquare:hover {
    background: #09B9E0;
}

.social .fa-youtube-play:hover {
    background: #DF192A;
}

Just note the above list of social media icons includes css code for 20 different social networks. Now don’t get excited and line up all these icons in your websites/blogs. Remember to use only the networks in which you are popular. Less is always good.

Final Word

Although you can add social icons anywhere on the website, it will be best if you place these social media icons on bootstrap top navigation bar, footer, side bar or on contact page. Choice is yours.

Make use of these stylish bootstrap 3 social media icons cleverly and power up your websites and blogs. Find this tutorial helpful? I would appreciate if you return me the favor and share it in your circle :)

Monday, 4 May 2015

How to Create One Page Website with Parallax Effect using Bootstrap

Live Demo

Step 1. HTML

For a start – prepare a skeleton markup:

index.html

<!DOCTYPE html>

<html lang="en" >

<head>

<meta charset="utf-8" />

<meta name="author" content="Script Tutorials" />

<title>Bootstrap one-page template with Parallax effect | Script Tutorials</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet" />

</head>

<body>

<!-- attach JavaScripts -->
<script src="js/jquery-1.10.2.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="//maps.google.com/maps/api/js?sensor=true"></script>

<script src="js/main.js"></script>

</body>

</html>

This is the minimal markup which allows us to use the responsive nature of the Bootstrap. Now we can begin with adding new elements to the page.

Top navigation menu

This is the fixed navigation bar. Here is the markup:

<!-- navigation panel -->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container-fluid">

<!-- Brand and toggle get grouped for better mobile display -->

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Your Brand Name</a>

</div>
<div class="collapse navbar-collapse" id="navbar-collapse-main">
<ul class="nav navbar-nav navbar-right">

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#information">Information</a></li>

<li><a href="#google_map">Contact</a></li>

<li><a href="http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/">Back to tutorial</a></li>

</ul>

</div><!-- /.navbar-collapse -->

</div><!-- /.container-fluid -->

</nav>

Basically, this is UL-LI-based menu (as usual). There are links to different sections of the page

Section 1 – Home

The first section is full-sized greeting page:

<!-- first section - Home -->

<div id="home" class="home">

<div class="text-vcenter">

<h1>Hello World</h1>

<h3>This is bootstrap-based layout</h3>

<a href="#about" class="btn btn-default btn-lg">Continue</a>

</div>

</div>

<!-- /first section -->

The greeting text is aligned vertically by center.

Section 2 – About

There are two columns, the image is in the first columnm and centered text is in the right column:

<!-- second section - About -->

<div id="about" class="pad-section">

<div class="container">

<div class="row">

<div class="col-sm-6">

<img src="images/logo.png" alt="" />

</div>

<div class="col-sm-6 text-center">

<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet.</h2>

<p class="lead">Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Sed interdum metus 
et ligula venenatis, at rhoncus nisi molestie. Pellentesque porttitor 
elit suscipit massa laoreet metus.</p>

</div>

</div>

</div>

</div>

<!-- /second section -->

Section 3 – Services

This blue section consists of four elements with glyph icons provided by the bootstrap:

<!-- third section - Services -->

<div id="services" class="pad-section">

<div class="container">

<h2 class="text-center">Our Services</h2> <hr />

<div class="row text-center">

<div class="col-sm-3 col-xs-6">

<i class="glyphicon glyphicon-cloud"> </i>

<h3>Service 1</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p>

</div>

<div class="col-sm-3 col-xs-6">

<i class="glyphicon glyphicon-leaf"> </i>

<h3>Service 2</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p>

</div>

<div class="col-sm-3 col-xs-6">

<i class="glyphicon glyphicon-phone-alt"> </i>

<h3>Service 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p>

</div>

<div class="col-sm-3 col-xs-6">

<i class="glyphicon glyphicon-bullhorn"> </i>

<h3>Service 4</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sem cras amet. Donec in sem cras amet.</p>

</div>

</div>

</div>

</div>

<!-- /third section -->

Section 4 – Information

This is the second wide section with full-size background, plus, there are two additional blocks (panels):

<!-- fourth section - Information -->

<div id="information" class="pad-section">

<div class="container">

<div class="row">

<div class="col-sm-6">

<div class="panel panel-default">

<div class="panel-heading">

<h2 class="panel-title">Additional information</h2>

</div>

<div class="panel-body lead">

Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit 
adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi 
felis vehicula justo, a dapibus quam augue non massa. Duis euismod, 
augue et tempus consequat, lorem mauris porttitor quam, consequat 
ultricies mauris mi a metus. Phasellus congue, leo sed ultricies 
tristique, nunc libero tempor ligula, at varius mi nibh in nisi. Aliquam
 erat volutpat. Maecenas rhoncus, neque facilisis rhoncus tempus, elit 
ligula varius dui, quis amet. 

</div>

</div>

</div>

<div class="col-sm-6">

<div class="panel panel-default">

<div class="panel-heading">

<h2 class="panel-title">Additional information</h2>

</div>

<div class="panel-body lead">

Lorem
 ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit 
adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi 
felis vehicula justo, a dapibus quam augue non massa. Duis euismod, 
augue et tempus consequat, lorem mauris porttitor quam, consequat 
ultricies mauris mi a metus. Phasellus congue, leo sed ultricies 
tristique, nunc libero tempor ligula, at varius mi nibh in nisi. Aliquam
 erat volutpat. Maecenas rhoncus, neque facilisis rhoncus tempus, elit 
ligula varius dui, quis amet. 

</div>

</div>

</div>

</div>

</div>

</div>

<!-- /fourth section -->

Section 5 – Contacts and Footer

In fact, there are three elements – the narrow blue service line (to put some extra information), the google map, where you can put your company address (as a pin on the map):

<!-- fifth section -->

<div id="services" class="pad-section">

<div class="container">

<div class="row">

<div class="col-sm-12 text-center">

<h3>Parallax scrolling effect is in action</h3>

<h3>The next is the address on Google maps</h3>

</div>

</div>

</div>

</div>

<!-- /fifth section -->
<!-- google map -->
<div id="google_map"></div>

<!-- /google map -->
<!-- footer -->
<footer>

<hr />

<div class="container">

<p class="text-right">Copyright © Your Company 2014</p>

</div>

</footer>

<!-- /footer -->

Step 2. CSS

You may have noticed that most elements already received all necessary styles at once. However, we still have to define styles for all new non-standard elements:

css/style.css

/* general styles */

html, body {

height: 100%;

width: 100%;

}
/* padded section */
.pad-section {

padding: 50px 0;

}

.pad-section img {

width: 100%;

}
/* vertical-centered text */
.text-vcenter {

display: table-cell;

text-align: center;

vertical-align: middle;

}

.text-vcenter h1 {

font-size: 4.5em;

font-weight: 700;

margin: 0;

padding: 0;

}
/* additional sections */
#home {

background: url(../images/home.jpg) no-repeat center center fixed; 

display: table;

height: 100%;

position: relative;

width: 100%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}
#about {
}
#services {
background-color: #306d9f;

color: #ffffff;

}

#services .glyphicon {

border: 2px solid #FFFFFF;

border-radius: 50%;

display: inline-block;

font-size: 60px;

height: 140px;

line-height: 140px;

text-align: center;

vertical-align: middle;

width: 140px;

}
#information {
background: url(../images/estate.jpg) no-repeat center center fixed; 

display: table;

height: 800px;

position: relative;

width: 100%;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

#information .panel {

opacity: 0.85;

}
#google_map {
height: 500px;

}
footer {
padding: 20px 0;

}

footer .glyphicon {

color: #333333;

font-size: 60px;

}

footer .glyphicon:hover {

color: #306d9f;

}

Step 3. JavaScript

In the end, there is the google map, in order to initialize it (with a predefined address) we have to add the following code:

js/main.js

$(document).ready(function (){
// create a LatLng object containing the coordinate for the center of the map
var latlng = new google.maps.LatLng(-33.86455, 151.209);
// prepare the map properties
var options = {

zoom: 15,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP,

navigationControl: true,

mapTypeControl: false,

scrollwheel: false,

disableDoubleClickZoom: true

};
// initialize the map object
var map = new google.maps.Map(document.getElementById('google_map'), options);
// add Marker
var marker1 = new google.maps.Marker({

position: latlng, map: map

});
// add listener for a click on the pin
google.maps.event.addListener(marker1, 'click', function() {

infowindow.open(map, marker1);

});
// add information window
var infowindow = new google.maps.InfoWindow({

content: '<div class="info"><strong>This is my company</strong>


My company address is here

32846 Sydney</div>'

}); 

});

 

Live Demo 