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

问题描述：

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

我尝试过类似问题的一种解决方案， 因为该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');
 }

我只想在HTML页面中显示刻度（✔）和十字（✘）符号，但它显示为方框或粘稠度–显然与编码有关。我已将meta标签设置为显示utf-8，但显然我缺少了一些东西。<meta http-equiv="Co ...