使用simple-line-icons符号作为占位符

Question

我在项目中添加了simple line icons字体，我想在此字体中添加一个符号作为表单输入占位符。这是我到目前为止所做的：

1. 在文档头中包含simple-line-icons.css：<link rel="stylesheet" href="simple-line-icons.css" media="all" type="text/css" />
2. 指向simple-line-icons.css中的字体源文件（woff，woff2，ttf，svg）
3. 定义.input类（对于我想添加符号的输入），其中包含图标字体系列.input { font-family:'simple-line-icons', inherit;}
4. 在simple-line-icons.css中找到我要添加的符号的unicode：.icon-user:before { content: "\e005"; }
5. 定义包含符号的unicode的占位符：<input class="input" type="text" placeholder="&#xe047;Your name" />

不幸的是，符号显示不正确。



我错过了什么？

Answer 1

也许您可以尝试将图标放在输入字段之外。像这样的东西：

<style>
.input{
    padding-left:20px;}
.icon-user{
    position:absolute;
    left:5px;
}
.input-wrapper{
    position:relative;
}
</style>
<div class='input-wrapper'>
<div class='icon-user'></div>
<input class="input" type="text" placeholder="Your name" />
<div>