时间戳

首页 > 解决方案 > 如何在输入字段中添加字体真棒图标？

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

问题描述

我有这段代码，我可以在输入字段中添加图像（它工作得很好）。但是，我想改用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”插入感叹号字体真棒图标

标签： csssassfont-awesome

解决方案

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

fas fa-exclamation-circle

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

content: "\f06a";

类系统依赖于 :before 伪类，它不适用于自闭合 HTML 元素，例如输入或br标记

内容样式也不适用于输入元素

我会做这样的事情是将输入字段包装在一个容器中，在元素上添加一个 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/

推荐阅读