Tất cả bài viết | Bootstrap

Hướng dẫn thiết kế thanh Social Icon cho website

Trong bài học lập trình web này các Bạn sẽ được hướng dẫn Hướng dẫn thiết kế thanh Social Icon cho website

Bước 1: Tạo cấu trúc HTML

<div class="container"> 
 <div class="row"> 
  <h2 class="text-center">Hướng dẫn thiết kế thanh Social Icon cho website</h2> 
  <div class="col-md-8 col-md-offset-4"> 
   <ul class="social-network social-circle"> 
    <li><a href="https://www.facebook.com/hocwebgiare" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a>
    </li> 
    <li><a href="https://twitter.com/123hocweb" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a>
    </li> 
    <li><a href="https://plus.google.com/u/0/104412429795050888280" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a>
    </li> 
    <li><a href="https://hocwebgiare.com/hoc-thiet-ke-web.html" class="iconYoutube" title="Linkedin"><i class="fa fa-youtube"></i></a>
    </li> 
    <li><a href="https://www.pinterest.com/hocwebgiare/" class="iconPinterest" title="Rss"><i class="fa fa-pinterest"></i></a>
    </li> 
   </ul>                               
  </div> 
 </div> 
</div>

Bước 1: Tạo cấu trúc CSS

ul.social-network { 
list-style: none;   
display: inline;    
margin-left:0 !important;   
padding: 0;
}
 
ul.social-network li {  
display: inline;    
margin: 0 5px;
}
 
 
.social-network a.iconPinterest:hover { 
background-color: #FF0000;
}
 
.social-network a.icoFacebook:hover {   
background-color:#FF0000;
}
 
.social-network a.icoTwitter:hover {    
background-color:#FF0000;
}
 
.social-network a.icoGoogle:hover { 
background-color:#FF0000;
}
 
.social-network a.icoVimeo:hover {  
background-color:#FF0000;
}
 
.social-network a.iconYoutube:hover {   
background-color:#FF0000;
}
 
.social-network a.iconPinterest:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.iconYoutube:hover i {   color:#fff;}
 
.social-network a.iconPinterest{    background-color:#F56505;}  
.social-network a.icoFacebook  {    background-color:#3B5998;} 
.social-network a.icoTwitter  { background-color:#33ccff;}
.social-network a.icoGoogle  {  background-color:#BD3518;}
 
.social-network a.icoVimeo  {   background-color:#0590B8;} 
.social-network a.iconYoutube  {    background-color:#007bb7;}
 
a.socialIcon:hover, .socialHoverClass { color:#44BCDD;}
 
.social-circle li a {   
display:inline-block;   
position:relative;  
margin:0 auto 0 auto;   
-moz-border-radius:50%; 
-webkit-border-radius:50%;  
border-radius:50%;  
text-align:center;  
width: 40px;    
height: 40px;   
font-size:16px;
}
 
.social-circle li i {   
margin:0;   
line-height:40px;   
text-align: center;
}
 
 
.social-circle li a:hover i, .triggeredHover {  
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg);  
-ms--transform: rotate(360deg); 
transform: rotate(360deg);  
-webkit-transition: all 0.2s;   
-moz-transition: all 0.2s;  
-o-transition: all 0.2s;    
-ms-transition: all 0.2s;   
transition: all 0.2s;
}
 
.social-circle i {  
color: #fff;    
-webkit-transition: all 0.8s;   
-moz-transition: all 0.8s;  
-o-transition: all 0.8s;    
-ms-transition: all 0.8s;   
transition: all 0.8s;
}

Bước 2: Gọi thư viện Bootstrap và Font awesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bước 3: Gọi thư viện JQUERY