引入第三方图标(icon)的教程
一、简介,以下是 阿里妈妈MUX 倾力打造的矢量图标 库
1.打开官网: http://www.iconfont.cn/
2.进入网站登录账号(3选1登录) ,登录成功后,
3.登录成功后,可以搜索自己想要的图标,然后加入购物车
4. 点击右上角的购物车后显示如下图,, 点击“添加至项目” 按钮
点击 Font Class 按钮 ----> 下载至本地 按钮
点击 更多操作 -----> 项目编辑 修改 fontClass名字 ,不和element的class冲突就可以
修改 fontClass名字 ,点击保存
7·点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图:
其中有一些demo 和 样例 不用导入项目,但是为了给其他人一个提示也最好直接把所有文件拷贝到自己的vue项目中的:
src/assets 下 新建一个 icon文件夹。效果如图,把文件全部放到icon下面
然后打开iconfont.css
添加 代码
[class^="el-icon-newfont"], [class*=" el-icon-newfont"] {font-family:"fontFamily" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
其中2个class 处 和 font-family 的设置是来自在 阿里矢量库项目设置的参数 请填写一致(注意:第二个class处前面有个空格)
修改完该文件 效果如下图:
8·然后在项目中要使用图标的页面 引入上面修改的css。
9·在项目中使用图标有两种方式 如 我的图标全称为 el-icon-newfont-qunfa
1)icon属性
<el-button size="small" icon="newfont-qunfa" @click="handleAdd" style="padding:6px 4px;width: 90px"> 新增群组 </el-button>
2)class属性
<el-button size="small" class="el-icon-newfont-qunfa" @click="handleAdd" style="padding:6px 4px;width: 90px"> 新增群组 </el-button>大功告成 ,希望能帮到大家!!!