html - 我如何在输入 :before? 中使用 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标签。无效。

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

尝试使用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>