Bootstrap snippet: icon block

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: icon,block



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-md-9"> <!-- Code --> <div class="wp-example"> <div class="section-title-wr"> <h3 class="section-title left"><span>Icon blocks without background</span></h3> </div> <div class="row mt-40"> <div class="col-md-6 col-sm-6"> <div class="icon-block icon-block-1"> <div class="icon-block-item"> <i class="fa fa-list-alt "></i> </div> <div class="icon-block-body"> <h4 class="">Endless possibilities</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> <div class="col-md-6 col-sm-6 "> <div class="icon-block icon-block-1"> <div class="icon-block-item"> <i class="fa fa-desktop"></i> </div> <div class="icon-block-body"> <h4 class="">Over 60 page layouts</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> </div> <hr> <div class="section-title-wr"> <h3 class="section-title left"><span>Icon blocks with background</span></h3> </div> <div class="row mt-40"> <div class="col-md-6 col-sm-6"> <div class="icon-block icon-block-2"> <div class="icon-block-item base"> <i class="fa fa-list-alt "></i> </div> <div class="icon-block-body"> <h4 class="">Endless possibilities</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> <div class="col-md-6 col-sm-6 "> <div class="icon-block icon-block-2"> <div class="icon-block-item base"> <i class="fa fa-desktop"></i> </div> <div class="icon-block-body"> <h4 class="">Over 60 page layouts</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="icon-block icon-block-2"> <div class="icon-block-item base-alt"> <i class="fa fa-list-alt "></i> </div> <div class="icon-block-body"> <h4 class="">Endless possibilities</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> <div class="col-md-6 col-sm-6 "> <div class="icon-block icon-block-2"> <div class="icon-block-item base-alt"> <i class="fa fa-desktop"></i> </div> <div class="icon-block-body"> <h4 class="">Over 60 page layouts</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> </div> <hr> <div class="section-title-wr"> <h3 class="section-title left"><span>Circled icon blocks with background - Horizontal</span></h3> </div> <div class="row mt-40"> <div class="col-md-6 col-sm-6"> <div class="icon-block icon-block-3"> <div class="icon-block-item light"> <i class="fa fa-list-alt "></i> </div> <div class="icon-block-body"> <h4 class="">Endless possibilities</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> <div class="col-md-6 col-sm-6 "> <div class="icon-block icon-block-3"> <div class="icon-block-item light"> <i class="fa fa-desktop"></i> </div> <div class="icon-block-body"> <h4 class="">Over 60 page layouts</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="icon-block icon-block-3"> <div class="icon-block-item dark"> <i class="fa fa-list-alt "></i> </div> <div class="icon-block-body"> <h4 class="">Endless possibilities</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> <div class="col-md-6 col-sm-6 "> <div class="icon-block icon-block-3"> <div class="icon-block-item dark"> <i class="fa fa-desktop"></i> </div> <div class="icon-block-body"> <h4 class="">Over 60 page layouts</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p> </div> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; } .icon-block { margin-bottom: 20px; } .icon-block.icon-block-1 .icon-block-item { width: 20%; display: table-cell; vertical-align: top; font-size: 64px; text-align: center; color: #333; } .icon-block.icon-block-1 .icon-block-body { display: table-cell; vertical-align: top; padding-left: 15px; } .icon-block.icon-block-1 .icon-block-body .title { margin-bottom: 5px; color: #333; } .icon-block.icon-block-1 .icon-block-body p { margin: 0; } .icon-block.icon-block-2 .icon-block-item { width: 100px; height: 100px; line-height: 100px; border-radius: 2px; display: block; float: left; font-size: 46px; text-align: center; } .icon-block.icon-block-2 .icon-block-body { padding-left: 115px; } .icon-block.icon-block-2 .icon-block-body .title { margin-bottom: 5px; color: #333; } .icon-block.icon-block-2 .icon-block-body p { margin: 0; } .icon-block.icon-block-3 .icon-block-item { width: 100px; height: 100px; line-height: 100px; border-radius: 100px; display: block; float: left; font-size: 46px; text-align: center; color: #333; } .icon-block.icon-block-3 .icon-block-body { padding-left: 115px; } .icon-block.icon-block-3 .icon-block-body .title { margin-bottom: 5px; color: #333; } .icon-block.icon-block-3 .icon-block-body p { margin: 0; } .base { background: #3498db; color: #fff !important; } .base-alt { background: #9cd70e; color: #fff; } .light { background: #ecf0f1; color: #333; } .dark { background: #131313; color: #fff !important; }
Dey-Dey

icon block

Dey-Dey
  Aug 7th 2015, 10:38
2.2K Views