输入框中的图标与内容和：之前而不是背景图像

Question

我的问题是我有这个漂亮的字体集，我用它在我的按钮旁边放置自定义图标。 （即：see here）

但现在我想创建一个输入框并在其前面添加一个图标，如HERE

但是我想在之前的内容中添加字体而不是背景图像，这可能吗？

Answer 1

CSS

.input-box { position: relative; }

input { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 20px; width: 195px; }

.unit { position: absolute; display: block; left: 5px; top: 10px; z-index: 9; }

HTML

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">To;</span>
</div>

查看以下示例

http://jsfiddle.net/pZLcg/52/