"icon box"
Bootstrap 3.3.0 Snippet by jeevan123456

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-circle"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-circle"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-circle"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> </div> <div class="row"> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-round"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-round"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-round"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> </div> <div class="row"> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-simple"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-simple"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> <div class="col-md-4 "> <div class="icon-box"> <div class="icon-box-size10 icon-box-simple"> <a href="#"><i class="fa fa-mobile"></i></a> </div> <h3>Full Responsive Design</h3> <p>This theme is using Bootstrap 3x version with mobile first approach to make it readily available for all devices.</p> </div> </div> </div> </div>
/*==================================== ICON CSS =======================================*/ .icon-box { } .icon-box a { color: #777777; background: #f5f5f5; display:block; text-align: center; } .icon-box a:hover, .icon-box a:focus {background: #27CBC0; color: #ffffff;} /* --- [ Social Icons Size ] --- */ .icon-box-size1 a {line-height: 40px; font-size: 10px; height: 40px;width: 40px;} .icon-box-size2 a {line-height: 42px; font-size: 20px; height: 42px;width: 42px;} .icon-box-size3 a {line-height: 48px; font-size: 30px; height: 48px;width: 48px;} .icon-box-size4 a {line-height: 48px; font-size: 40px; height: 48px;width: 48px;} .icon-box-size5 a {line-height: 48px; font-size: 50px; height: 48px;width: 48px;} .icon-box-size6 a {line-height: 48px; font-size: 60px; height: 48px;width: 48px;} .icon-box-size7 a {line-height: 48px; font-size: 70px; height: 48px;width: 48px;} .icon-box-size8 a {line-height: 48px; font-size: 80px; height: 48px;width: 48px;} .icon-box-size9 a {line-height: 48px; font-size: 90px; height: 48px;width: 48px;} .icon-box-size10 a {line-height: 190px; font-size: 100px; height: 190px;width: 190px;} /* --- [ Icons Mode ] --- */ .icon-box-round a {border-radius: 2px;} .icon-box-circle a {border-radius: 100%;} /* --- [ Icons Colored ] --- */ .icon-box-colored a {color: #ffffff;} .icon-box-colored a:hover, .icon-box-colored a:focus { opacity: 0.85;} /* --- [ Icons Simple ] --- */ .icon-box-simple a {display: inline;background: none;margin: 0 10px 10px 0;} .icon-box-simple a:hover, .icon-box-simple a:focus { background: none; color: inherit;}

Related: See More


Questions / Comments: