Question

我需要使用::before伪元素将Fontawesome图标添加到输入字段。但是，该图标未显示，我无法弄清楚自己在做什么。（我正在使用Bootstrap和Fontawesome 5 Pro）。

.search-field-round::before {
  content: '\f002';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  display: inline-block;
  position: absolute;
  top: 0;
  left: -5px;
  color: red;
}

<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- FONT AWESOME CDN - Since I'm using a Pro version I do not wish to share my link here -->

    
    
 <form class=" form-inline searchbar-form col-12 ">
    <div class="col-10 search-field ">
        <input type="search " class="form-control search-field-round " placeholder="¿Qué servicio buscas? ">
    </div>
</form>

Answer 1

嗨，据我所知，伪元素在输入字段上不起作用。您可以做的是在输入中放置一个span元素，然后在其中设置图标，或者将其放在输入的父div中。

Answer 2

我相信这就是您要寻找的。您不能在文本字段上使用伪元素。

Font Awesome icon inside text input element

Answer 3

经过更多研究后，我了解到它不能在输入元素中使用伪元素。我发现this link很有帮助，对我有用：

input[type=text] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: .3s;
}

input[type=text]:focus {
  border-color: dodgerBlue;
  box-shadow: 0 0 8px 0 dodgerBlue;
}

.inputWithIcon input[type="text"] {
  padding-left: 40px;
}

.inputWithIcon {
  position: relative;
}

.inputWithIcon i {
  position: absolute;
  left: 0;
  top: 8px;
  padding: 9px 8px;
  color: #aaa;
  transition: 0.3s;
}

.inputWithIcon input[type="text"]:focus+i {
  color: dodgerBlue;
}

<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<div class="inputWithIcon">
  <input type="text" placeholder="Your name">
  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
</div>

为什么我的Fontawesome图标没有显示为伪元素？

3 个答案: