How to put a Glyphicon inside input tag?
Question
I'm trying put a glyphicon inside input tag html but it's incorrect.
I mean
<= Image
Code
<input type="text" name="search" id="search_box pull-right" class="form-control search_box" placeholder="Search for..."
<span class="glyphicon glyphicon-search" ></span>
/> <!-- end input -->
5 answers
solution1
3 ACCPTED 2016-02-29 09:46:21
Try this
<div class="col-sm-6">
<div class="right-inner-addon">
<i class="icon-search"></i>
<input type="search" class="form-control" placeholder="Search" />
</div>
</div>
solution2
2 2016-02-29 10:04:16
Just replace this with your markup.
<div class="input-group">
<span class="input-group-addon" id="search-query"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" aria-describedby="search-query">
</div>
It would look like this
and using CSS make the span's background color transparent, like so
#search-icon {
background-color: transparent;
}
#search-icon input {
border-left: 0;
}
Then finally it would look like this(what you want). You could add a placeholder too if you wish.
solution3
0 2016-02-29 09:41:56
you are probably looking for input-group-addon : http://getbootstrap.com/components/#input-groups-basic
Just a note : you can't put tags inside a
input. Have a look at: https://www.w3.org/TR/html4/index/elements.html
solution4
0 2016-02-29 09:45:22
You can add below this way:
<div class="form-group col-xs-6">
<label class="control-label">
<code>.inner-addon.<i>left</i>-addon</code>
</label>
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-user"></i>
<input type="text" class="form-control" placeholder="Username" />
</div>
</div>
solution5
0 2020-03-15 19:33:47
Try this:
<head><link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></head>
<body>
<div class="topnav">
<form action="">
<input type="text" class="placeicon" placeholder=" Search">
<button class="searchButton" type="submit">Search</button>
</form>
</div>
</body>
And then add external CSS:
.placeicon {
font-family: fontawesome;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.