Fork me on GitHub

表单Placeholder内使用Font-awesome图标文字

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

表单Placeholder内使用Font-awesome图标文字

问题

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

表单

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

1
<input type="text" class="text" placeholder="用户名">
1
<i class="fa fa-user"></i>

解决方法

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

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

iconfont

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

总结

最后总结一下 IconFont的优点:

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