表单Placeholder内使用IconFont图标文字。

问题

最近在写一个后台登陆页面，构思在帐号密码输入框的占位符内添加一个Font-awesome图标文字。（如图）

表单

可是呢，占位符文本是定义在placeholder=""这个属性里的。而Font-awesome呢又是用<li>标签加class="fa"类来实现的。所以这个带class的<li>标签就没法插到placeholder里去了。

<input type="text" class="text" placeholder="用户名">

<i class="fa fa-user"></i>

解决方法

查了资料后找到了阿里的IconFont，也是一个图标字体框架。和Font-awesome不同的是，IconFont提供了多种引用方式。这里我们就通过unicode引用方式将图标文字插入到表单占位符中。

1. 首先我们选择几个心仪的图标加入到自己的项目中。值得一提的时图标库中也有Font-awesome图标哦。
2. 生成工程，下载文件。
3. 将下载的文件放到网站目录下。
4. 在css中引入font-face和iconfont的样式。
5. 然后在placeholder的值中插入对应图标的unicode即可。

iconfont

<input type="text" class="text" placeholder="&#xe751;&nbsp;用户名">

总结

最后总结一下 IconFont的优点：

1. 有多种应用方式，可以应对不同情况引入图标字体。
2. 图标库丰富，且可以对图标进行二次编辑，或者上传自己设计的图标。
3. 引用时只需添加自己创建的项目中的图标文件即可，而不需要将整个图标库引入。节省空间，加快加载速度。
4. 支持国产。