文本输入元素中的字体真棒图标 [英] Font Awesome icon inside text input element

问题描述

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

I am trying to insert a user icon inside username input field.

我尝试过类似问题
知道 background-image 属性将无法工作，因为 Font Awesome 是一种字体。

I've tried one of the solution from the similar question knowing that background-image property won't work since Font Awesome is a font.

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

The following is my approach and I can't get the icon display.

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

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

我在默认字体中声明了字体awesome css，所以我不是确保如果添加上面的font-family是正确的方法。

I have font face declared in the default font awesome css so I wasn't sure if adding font-family above was the right approach.

 @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');
 }

推荐答案

：before和：after伪内容不用于处理替换的内容，例如 img 和输入元素。添加一个包装元素并声明一个font-family是一种可能性，就像使用一个背景图片一样。或者html5占位符文本符合您的需要：

You're right. :before and :after pseudo content is not intended to work on replaced content like img and input elements. Adding a wrapping element and declare a font-family is one of the possibilities, as is using a background image. Or maybe a html5 placeholder text fits your needs:

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

不支持placeholder属性的浏览器会忽略它。

Browsers that don’t support the placeholder attribute will simply ignore it.

前内容选择器选择输入： input [type =text]：before 。您应该选择包装器： .wrapper：before 。请参见 http://jsfiddle.net/allcaps/gA4rx/ 。
我还添加了占位符建议，其中包装器是多余的。

The before content selector selects the input: input[type="text"]:before. You should select the wrapper: .wrapper:before. See http://jsfiddle.net/allcaps/gA4rx/ . I also added the placeholder suggestion where the wrapper is redundant.

.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）存储图标。其他字符不存在，并返回到浏览器默认值。这应该与任何其他输入相同。如果在输入元素上定义字体，则在我们使用图标的情况下，提供与回退相同的字体。像这样的：

Fallback

Font Awesome uses the Unicode Private Use Area (PUA) to store icons. Other characters are not present and fall back to the browser default. That should be the same as any other input. If you define a font on input elements, then supply the same font as fallback for situations where us use an icon. Like this:

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

这篇关于文本输入元素中的字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！