シンプルラインアイコンシンボルをプレースホルダとして使用

Question

私はsimple line iconsフォントをプロジェクトに含めました。このフォントからフォーム入力プレースホルダとしてシンボルを追加したいと思います。

1. は、文書の頭の中でsimple-line-icons.css含ま：.inputクラスを定義simple-line-icons.css（woff、woff2、ttf、svg）
2. のソースファイルをフォントに<link rel="stylesheet" href="simple-line-icons.css" media="all" type="text/css" />
3. ポイントを（のためにここに私はこれまで何をやったかですアイコンを追加したい場所を入力してください）.input { font-family:'simple-line-icons', inherit;}
4. simple-line-icons.cssシンボルのユニコードを追加します：.icon-user:before { content: "\e005"; }<input class="input" type="text" placeholder="&#xe047;Your name" />

残念ながら、記号が正しく表示されない：

は、シンボルのUnicodeを含むプレースホルダを定義します。

私は何をしないのですか？

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>