Bootstrap - Round Icon Badges | Web Development | Web Development | Web Design | Photo 360° Virtual Tour | Web Hosting & Domain | Google Apps for Business

Bootstrap - Round Icon Badges

HOME
Bootstrap - Round Icon Badges

Preview Design
See More

Bootstrap - Round Icon Badges

Detail
Download
Share
Ask

Description

Untuk membuat style ini membutuhkan Bootstrap sebagai CSS frameworknya, Bootstrap dapat di download di web utama getbootstrap.com.

Selanjutnya siapkan HTML Code dan CSS Code untuk membuat stylenya, berikut ini merupakan codenya yang dapat di copy paste langsung untuk mencobanya.

HTML Code

<div class="container">
<div class="row">
<div class="col-sm-1">
       <div class="round round-sm hollow ">
<span class="glyphicon glyphicon-file"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-sm hollow blue">
<span class="glyphicon glyphicon-user"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-sm hollow orange">
<span class="glyphicon glyphicon-tags"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-sm hollow green">
<span class="glyphicon glyphicon-trash"></span>
</div>
   </div>
</div>
<div class="row">
<div class="col-sm-1">
       <div class="round hollow">
<span class="glyphicon glyphicon-file"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round hollow blue">
<span class="glyphicon glyphicon-user"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round hollow orange">
<span class="glyphicon glyphicon-tags"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round hollow green">
<span class="glyphicon glyphicon-trash"></span>
</div>
   </div>
</div>
<div class="row">
<div class="col-sm-1">
   <div class="round round-lg hollow ">
<span class="glyphicon glyphicon-file"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-lg hollow blue">
<span class="glyphicon glyphicon-user"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-lg hollow orange">
<span class="glyphicon glyphicon-tags"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-lg hollow green">
<span class="glyphicon glyphicon-trash"></span>
</div>
   </div>
</div>

<div class="row">
<div class="col-sm-1">
   <div class="round round-sm">
<span class="glyphicon glyphicon-file"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-sm blue">
<span class="glyphicon glyphicon-user"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-sm orange">
<span class="glyphicon glyphicon-tags"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-sm green">
<span class="glyphicon glyphicon-trash"></span>
</div>
   </div>
</div>
<div class="row">
<div class="col-sm-1">
       <div class="round">
<span class="glyphicon glyphicon-file"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round blue">
<span class="glyphicon glyphicon-user"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round orange">
<span class="glyphicon glyphicon-tags"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round green">
<span class="glyphicon glyphicon-trash"></span>
</div>
   </div>
</div>
<div class="row">
<div class="col-sm-1">
   <div class="round round-lg">
<span class="glyphicon glyphicon-file"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-lg blue">
<span class="glyphicon glyphicon-user"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-lg orange">
<span class="glyphicon glyphicon-tags"></span>
</div>
   </div>
<div class="col-sm-1">
   <div class="round round-lg green">
<span class="glyphicon glyphicon-trash"></span>
</div>
   </div>
</div>
</div>

CSS Code

.row {
margin-top: 30px;
}
.round {
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #222;
color: #FFF;
text-align: center;
}
.round.hollow {
display: inline-block;
height: 30px;
width: 30px;
line-height: 30px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: #FFF;
color: #222;
text-align: center;
-webkit-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.75);
}

.round.round-sm {
height: 20px;
width: 20px;
line-height: 20px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 0.7em;
}
.round.round-lg {
height: 40px;
width: 40px;
line-height: 40px;
-moz-border-radius: 20px;
border-radius: 20px;
font-size: 1.5em;
}

.round.blue {
background-color: #3EA6CE;
}

.round.orange {
background-color: #FF6701;
}

.round.green {
background-color: #42A129;
}

.round.hollow.blue {
color: #3EA6CE;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 0px 3px #3EA6CE;
-moz-box-shadow: 0px 0px 0px 3px #3EA6CE;
box-shadow: 0px 0px 0px 3px #3EA6CE;
}

.round.hollow.orange {
color: #FF6701;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 0px 3px #FF6701;
-moz-box-shadow: 0px 0px 0px 3px #FF6701;
box-shadow: 0px 0px 0px 3px #FF6701;
}

.round.hollow.green {
color: #42A129;
background-color: #FFF;
-webkit-box-shadow: 0px 0px 0px 3px #42A129;
-moz-box-shadow: 0px 0px 0px 3px #42A129;
box-shadow: 0px 0px 0px 3px #42A129;
}

Free Download Bootstrap - Round Icon Badges

Search Stories

Virtual Tour

Jakarta Art BuildingJakarta

The Jakarta Art Building (Gedung Kesenian Jakarta), historically known

See Detail

Butuh Bantuan?

Kami dengan senang hati akan membantu anda. Tim kami akan siap melayani 24/7 untuk membantu anda .

0856 43688710
[email protected]