CODEWITHSUNDEEP
htmltwitter-bootstrap
AzVoz
AzVoz

Reputation: 429

How to put a Glyphicon inside input tag?

I'm trying put a glyphicon inside input tag html but it's incorrect.

I mean

search <= 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 -->

Upvotes: 4

Views: 18679

Answers (5)

Anthony Thanasis
Anthony Thanasis

Reputation: 75

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="&#xf002; Search">
            <button class="searchButton" type="submit">Search</button>
        </form>
    </div>
</body>

And then add external CSS:

 .placeicon {
      font-family: fontawesome;
  }

Upvotes: 1

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6652

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

enter image description here

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.

enter image description here

Upvotes: 2

Raviteja
Raviteja

Reputation: 3489

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>

LIVE DEMO

Other ways to show

Upvotes: 3

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

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>

WORKING DEMO

Upvotes: 0

Hitmands
Hitmands

Reputation: 14199

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

Upvotes: 0

Related Questions