"buttons with image"
Bootstrap 3.1.0 Snippet by outsideMyBox

<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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-xs-4"> <button type="button" class="btn btn-primary btn-lg btn-block withImageAndIcon"> <div class="fa-lg withFolder48"> <i class="fa fa-plus"></i> </div> Add folder </button> </div> <div class="col-xs-4"> <button type="button" class="btn btn-warning btn-lg btn-block withImageAndIcon"> <div class="fa-lg withSet48"> <i class="fa fa-plus"></i> </div> Add Mnemoset </button> </div> </div> <br/> <div class="row"> <div class="col-xs-3"> <button type="button" class="btn btn-primary btn-block withImageAndIcon"> <div class="fa-lg withFolder32"> <i class="fa fa-plus"></i> </div> Add folder </button> </div> </div> </div>
.withImageAndIcon { font-weight: bold; } .withImageAndIcon > div { vertical-align: middle; display:inline-block; margin-right: 0.2em; } .withImageAndIcon > div > i { float: right; line-height:72px; color: green; text-shadow: 2px 2px 0 rgba(255,255,255,1), -2px 2px 0 rgba(255,255,255,1),2px -2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1); } .withFolder48 { line-height: 48px; width: 48px; height: 48px; background: transparent url("http://png-2.findicons.com/files/icons/1938/xp_icandy_1/48/open_folder.png") no-repeat; } .withSet48 { line-height: 48px; width: 48px; height: 48px; background: transparent url("http://png-2.findicons.com/files/icons/1938/xp_icandy_1/48/open_folder.png") no-repeat; } .withFolder32 { line-height: 32px; width: 32px; height: 32px; background: transparent url("http://icons-search.com/img/fasticon/Sweet_System_lnx.zip/Sweet_System_lnx-Icons-32X32-folder.png-32x32.png") no-repeat; } .withFolder32 i { line-height:48px !important; }

Related: See More


Questions / Comments: