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

Question

我想在:before(\F002手工玻璃标记)中使用FontAwesome .但它不起作用.(:重点工作)

我错过了什么？

.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

你不能:before :after在input标签上应用伪类.它无效.

伪类仅用于容器元素.你不能像元素使用它们<input>,<img>等等.

尝试使用span图标并将其包装成一个label

堆栈代码段

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>