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

![选择图标](https://upload-images.jianshu.io/upload_images/9264166-6253ad76ee7c9a1f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![选中图标](https://upload-images.jianshu.io/upload_images/9264166-7932dda3bc8df96a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

[项目地址](https://gitee.com/LiZhendd/icon-picker.git)

#### 安装

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

#### 全局注册

`main.js`中注册

```
import iconPicker from 'vue-fontawesome-elementui-icon-picker';

Vue.use(iconPicker);
```

#### 使用

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


#### 问题解决

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

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

```css

[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;
}

```