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”插入感叹号f 很棒的图标

Answer 1

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

fas fa-exclamation-circle

或者您将使用内容CSS样式。

content: "\f06a";

类系统依赖于：before伪类，该类不适用于自动关闭的HTML元素，例如 input 或 br 标记

内容样式也不适用于 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/

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

1 个答案: