1. 主要使用iconfont的unicode编码实现图标的显示。
2. 引入iconfont
登录iconfont, 选择合适的图标,加入购物车, 打开购物车, 将图标添加至项目,选择unicode格式,下载至本地。将下载的文件复制到项目代码中,一般放置在assets下。之后在main.js中引入文件css文件。
如果项目中有很多个iconfont文件,unicode方式的引入的话,可以修改类名及fontclass的值,避免与其他iconfont值混淆。
主要修改的是: iconfont.css文件与iconfont.json 文件。具体详见截图。
- 使用iconfont
使用的时候是unicode码,但是需要注意,不能直接使用#xe620; 需要将# 及‘ ; ’去掉。 在前边加' \ '。 el-option中显示图标,需要将el-option设置class为引入的iconfont的类名。这个时候,value 和label 设置为unicode 码,即可,显示图标。
选中图标后,el-input 中显示图标, 需要使用深度css, 修改el-select 的input的样式,修改字体样式为引入的字体样式,这样可以实现input 显示图标。