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

Stack Snippet

＆＃13;

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";
}

＆＃13;

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

＆＃13;

Answer 2

我按照Bhuwan的建议更改了我的代码。（我把图标放在左边。）

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>

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

2 个答案: