为什么我的 Fontawesome 图标没有显示为伪元素？ [复制]答案

【问题标题】：Why isn't my Fontawesome icon showing as a pseudo element? [duplicate]为什么我的 Fontawesome 图标没有显示为伪元素？ [复制]
【发布时间】：2020-11-12 00:10:03
【问题描述】：

我需要使用::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>

【问题讨论】：

我认为伪元素可以使用 fontawesome 的方式在版本 5 中发生了变化 - 请参阅 [link]stackoverflow.com/questions/47712987/… - 您现在必须启用它，因为它显然默认禁用。但不能使用正如@cloned 指出的那样，无论如何都在输入元素上。

标签： css

【解决方案1】：

嗨，据我所知，伪元素不适用于输入字段。您可以做的是在输入中放置一个 span 元素并在其中设置图标，或者在您的情况下将其放在输入的父 div 中。

【讨论】：

【解决方案2】：

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

Font Awesome icon inside text input element

【讨论】：

【解决方案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>

【讨论】：