我如何在输入中使用FontAwesome：之前？

Question

I want to use FontAwesome in :before ( \\F002 Hand glass mark). But it doesn't work. (:focus works)

What do I missing?

 .font-awesome { border-radius: 15px; border: 1px solid gray; padding: 0 15px 0 30px; line-height: 30px; outline: none; } .font-awesome:focus { border-color: lightblue; } .font-awesome:before { font-family: FontAwesome; content: "\\f002"; } 

 <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <input type="text" class="font-awesome" /> 

Answer 1

You cant apply pseudo class :before :after on input tag. Its invalid.

Pseudo classes are only for container elements. You can not use them in elements like <input> , <img> etc.

Try to use span for icon and wrap this into a label

Stack Snippet

 label input { border-radius: 15px; border: 1px solid gray; padding: 0 15px 0 30px; line-height: 30px; outline: none; } .font-awesome:focus { border-color: lightblue; } .font-awesome:before { font: normal normal normal 14px/1 FontAwesome; content: "\\f002"; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <label><input type="text" class="" /><span class="font-awesome"></span></label> 

Answer 2

I changed my code by Bhuwan's advice. (I put the icon on left inside.)

CSS:

.keyword {
  border-radius: 15px;
  border: 1px solid lightgray;
  padding: 0 15px 0 30px;
  line-height: 30px;
  outline: none;
}

.keyword:focus {
  border-color: MediumTurquoise;
}

.search_icon:before {
  font: normal normal normal 15px/1 FontAwesome;
  content: "\f002";
  color: lightgray;
  position: absolute;
  top: 16px;
  left: 16px;
}

HTML:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<label>
  <span class="search_icon" />
  <input type="text" class="keyword" />
</label>