文本输入元素中的Font Awesome图标

一尘不染

文本输入元素中的Font Awesome图标

html

我正在尝试在用户名输入字段中插入用户图标。

我尝试过类似问题的一种解决方案，因为该background-image属性由于FontAwesome是一种字体而无法使用。

以下是我的方法，但无法显示图标。

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

我在默认字体真棒css中声明了字体，所以我不确定在上面添加字体系列是否正确。

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

阅读 564

2020-05-10

共1个答案

一尘不染

你是对的。：before和：after伪内容不适用于替换的内容（如img和input元素）。与使用背景图像一样，添加包装元素并声明字体系列是一种可能。或者，也许html5占位符文本符合您的需求：

<input name="username" placeholder="&#61447;">

不支持占位符属性的浏览器将直接忽略它。

更新

before内容选择器选择输入：input[type="text"]:before。您应该选择包装器：.wrapper:before。我还添加了占位符建议，其中包装是多余的。

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

倒退

Font
Awesome使用Unicode专用区（PUA）来存储图标。其他字符不存在，并退回到浏览器默认值。这应该与任何其他输入相同。如果在输入元素上定义字体，则在我们使用图标的情况下，提供与后备字体相同的字体。像这样：

input { font-family: 'FontAwesome', YourFont; }

2020-05-10