Element-UI配个第三方字体图片插件使用
- 我这里采用的是
阿里icon
- 选择好你的图标之后
download
完成之后将里面需要的文件放在一个自定义的文件夹内
- 按照下载的演示文档给的要求,按照他的要求引入,比如我这里采用的是
font-css
引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js' // 封装的局部引入的element-ui插件
import '@/assets/font/iconfont.css'; // 全局引入font-icon
- 在Element-UI的html代码中引用他给他的必须类型,比如说我这里是必须的
class=".iconfont .icon-xxx"
如果用的是class就记得加上.
,像在element-ui
中的自定义属性
中就不用加.
了
<el-form-item>
<el-input prefix-icon="iconfont icon-suo"></el-input>
</el-form-item>
- 最终生成字体图标