Login / Join
Search Icon on Bootstrap search box
submitted on 16/07/2013 by
Codicode
+ infos
Config
Embed
Share
Search Icon on Bootstrap search box
by
Codicode
adding a bootstrap search icon on the left side of a bootstrap search box (input).
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js
+ Css file(s) :
//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="b70" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<form class="navbar-form pull-left form-search"> <div class="input-append"> <i class="icon-zoom-in"></i> <input data-provide="typeahead" data-items="4" type="text" class="span2 search-query"> <button class="btn">Search</button> </div> </form>
CSS
.icon-zoom-in { position:relative; left:23px; top:-8px; z-index:999; } .input-append input { height:30px; padding-left:25px; }
Javascript
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact