使用简单的线条图标符号作为占位符

我已经在我的项目中包含了simple line icons字体，我想从该字体中添加一个符号作为表单输入占位符。这是我到目前为止已经完成：使用简单的线条图标符号作为占位符

包含在文件头simple-line-icons.css：<link rel="stylesheet" href="simple-line-icons.css" media="all" type="text/css" />
点字库simple-line-icons.css（woff，woff2，ttf，svg）
源文件定义.input类（输入我想添加符号的地方）包含图标字体系列.input { font-family:'simple-line-icons', inherit;}
在simple-line-icons.css中找到我想添加的符号的Unicode：.icon-user:before { content: "\e005"; }
定义包含符号的Unicode的占位符：<input class="input" type="text" placeholder="Your name" />

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

我缺少什么？

2017-02-12 Giorgio

也许你可以尝试把输入栏外的图标。这样的事情：

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

来源

2017-02-12 12:15:59 Eliran

是的，我已经想过（如果占位符解决方案不可行，我可能会这样做）。感谢您的建议。 – Giorgio

使用简单的线条图标符号作为占位符

回答

相关问题