文本输入元素内的 Font Awesome 图标 [英] 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 和 input 元素.添加包装元素并声明字体系列是一种可能性，就像使用背景图像一样.或者 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;">

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

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

before 内容选择器选择输入: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) 来存储图标.其他字符不存在并回退到浏览器默认值.这应该与任何其他输入相同.如果您在 input 元素上定义字体，则为我们使用图标的情况提供与回退相同的字体.像这样:

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; }

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