如何在输入字段中添加字体真棒图标？ [复制]

Question

我有这段代码，我可以在输入字段中添加图像（它工作得很好）。但是，我想改用 Font Awesome 图标。谁能指出我正确的方向？到目前为止，我的代码如下所示：

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('http://iconsetc.com/icons-watermarks/simple-black/bfa/bfa_exclamation/bfa_exclamation_simple-black_512x512.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}

<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

注意：

我正在尝试使用此代码：“\f06a”来插入感叹号 font awesome icon

Answer 1

因此，通常您可以使用以下类结构添加 FontAwesome 图标：

fas fa-exclamation-circle

或者你会使用内容 css 样式。

content: "\f06a";

类系统依赖于 :before 伪类，它不适用于 input 或 br 标签等自闭合 HTML 元素

内容样式也不适用于 input 元素

我会做这样的事情是将输入字段包装在一个容器中，在元素上添加一个 FontAwesome 元素作为 :after。

<i class="fas fa-exclamation-circle"></i>

然后为我的容器设置样式，使其看起来像输入字段，同时从输入字段本身中删除一些样式，例如背景颜色和边框。然后，您需要找出将 FontAwesome 图标放在表单字段旁边的最佳方式。

字段 HTML：

<form>
    <label for="name">Name</label>
    <div class="formField">
        <input class="valid" type="text" name="name" />
    </div>
</form>

示例样式

.formField{
    border-color: #28a745;
    padding-right: 30px;
    position: relative;
}
input.valid{
    background-color: transparent;
    border: 0;
    margin-right: 50px;
}
.formField:after{
    position: absolute;
    transform: translate(0,-50%);
    right: 0;
    top: 50%;
    font-family: "Font Awesome 5 Pro";
    content: "\f06a";
}

根据您拥有的 FontAwesome 许可证，您可能需要更改字体系列样式以匹配您需要的样式。

您可能需要调整一些样式以满足您的需要，但这应该可以帮助您开始。

JSFiddle： https://jsfiddle.net/8jz9ngpu/