"icons Glyphicons"
Bootstrap 3.1.0 Snippet by joshuaedwardk

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- Boxes de Acoes --> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-asterisk"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-plus"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-euro"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-minus"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-cloud"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-envelope"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-pencil"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-glass"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-music"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-search"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-heart"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-star"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-star-empty"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-user"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-film"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-th-large"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-th"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-th-list"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-ok"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-remove"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-zoom-in"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-zoom-out"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-off"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-signal"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-cog"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-trash"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-home"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-file"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-time"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-road"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-download-alt"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-download"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-upload"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-inbox"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-play-circle"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-repeat"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-refresh"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-list-alt"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-lock"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-flag"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-book"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-bookmark"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="fglyphicon glyphicon-print"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-camera"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-font"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-bold"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-italic"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-text-height"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-text-width"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-align-left"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-align-center"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-align-right"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-align-justify"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-list"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-indent-left"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-indent-right"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-facetime-video"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-picture"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-map-marker"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-adjust"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-tint"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-edit"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-share"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-check"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-move"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-step-backward"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-fast-backward"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-backward"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-play"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-pause"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-stop"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-forward"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-fast-forward"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-step-forward"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-eject"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-chevron-left"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-chevron-right"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-plus-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-minus-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-remove-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-ok-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-question-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-info-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-screenshot"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-remove-circle"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-ok-circle"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-ban-circle"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-arrow-left"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-arrow-right"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-arrow-up"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-arrow-down"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-share-alt"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-resize-full"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-zoom-out"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-resize-small"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-exclamation-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-gift"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-leaf"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-eye-open"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-eye-close"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-warning-sign"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-plane"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-calendar"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-random"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-comment"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-magnet"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-chevron-up"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-chevron-down"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-retweet"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-shopping-cart"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-folder-close"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-folder-open"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-resize-vertical"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-resize-horizontal"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="fglyphicon glyphicon-hdd"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-bullhorn"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-bell"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-certificate"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-thumbs-up"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-thumbs-down"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-hand-right"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-hand-left"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-hand-up"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-hand-down"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-circle-arrow-right"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-circle-arrow-left"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-circle-arrow-up"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-circle-arrow-down"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-globe"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-wrench"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-tasks"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-filter"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-briefcase"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-fullscreen"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-dashboard"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-paperclip"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-heart-empty"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-link"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-phone"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-pushpin"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-usd"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-gbp"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort-by-alphabet"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort-by-order"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort-by-order"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort-by-order-alt"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort-by-attributes"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sort-by-attributes-alt"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-unchecked"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="fglyphicon glyphicon-expand"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-collapse-down"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-collapse-up"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-log-in"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-flash"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-log-out"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-new-window"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-record"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-save"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-open"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-saved"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-import"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-export"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-send"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-floppy-disk"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-floppy-saved"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-floppy-remove"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-floppy-save"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-floppy-open"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-credit-card"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-transfer"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-cutlery"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-header"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-compressed"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-earphone"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-phone-alt"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-tower"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-stats"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sd-video"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-hd-video"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-subtitles"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sound-stereo"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sound-dolby"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sound-5-1"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sound-6-1"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-sound-7-1"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-copyright-mark"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-registration-mark"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-cloud-download"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-cloud-upload"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-tree-conifer"></i></div> </div> <div class="space"></div> </div> </div> <div class="col-xs-4 col-sm-3 col-lg-2"> <div class="box"> <div class="icon"> <div class="image"><i class="glyphicon glyphicon-tree-deciduous"></i></div> </div> <div class="space"></div> </div> </div> <!-- /Boxes de Acoes --> </div> </div>
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"; @import "http://fonts.googleapis.com/css?family=Roboto:400,500"; .box > .icon { text-align: center; position: relative; } .box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: #63B76C; vertical-align: middle; } .box > .icon:hover > .image { background: #333; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform:rotate(360deg) scale(1.5); -moz-transform:rotate(360deg) scale(1.5); -o-transform:rotate(360deg) scale(1.5); -ms-transform:rotate(360deg) scale(1.5); transform:rotate(360deg) scale(1.5); } .box > .icon > .image > i { font-size: 36px !important; color: #fff !important; } .box > .icon:hover > .image > i { color: white !important; } .box > .icon > .info { margin-top: -24px; background: rgba(0, 0, 0, 0.04); border: 1px solid #e0e0e0; padding: 15px 0 10px 0; } .box > .icon:hover > .info { background: rgba(0, 0, 0, 0.04); border-color: #e0e0e0; color: white; } .box > .icon > .info > h3.title { font-family: "Roboto",sans-serif !important; font-size: 16px; color: #222; font-weight: 500; } .box > .icon > .info > p { font-family: "Roboto",sans-serif !important; font-size: 13px; color: #666; line-height: 1.5em; margin: 20px;} .box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; } .box > .icon > .info > .more a { font-family: "Roboto",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; } .box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: #63B76C; } .box .space { height: 30px; }

Related: See More

Vue Argon Design System
Spinning social icons
Attractive Round Cornered Button with Icons

Questions / Comments: