vue element-ui 图标选择组件vue-fontawesome-elementui-icon-picker


此项目已经废弃，欢迎使用新项目 e-icon-picker 图标选择器

vue-fontawesome-elementui-icon-picker

简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！

选择图标

选中图标

安装

1
npm install vue-fontawesome-elementui-icon-picker

全局注册

main.js中注册

1
2
3
import iconPicker from 'vue-fontawesome-elementui-icon-picker';

Vue.use(iconPicker);

使用

1
 <icon-picker v-model="icon"></icon-picker>

依赖

本组件依赖以下组件开发，若出现异常情况，请先对比你的版本依赖是否与本组件一致：

1
2
3
    "element-ui": "^2.9.1",
    "font-awesome": "^4.7.0",
    "vue": "^2.6.10"

问题解决

若是选中的图标界面不展示，则有可能是你的项目中，引用的fontawesome图标有问题。

请在全局css中添加一下css尝试：

1
2
3
4
5
6
7
8
[class^="el-icon-fa"], [class*=" el-icon-fa"] {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}