将阿里矢量图添加到element-ui
参考: 阿里矢量图官方帮助
在阿里矢量图的操作
- 选择需要的图标添加至购物车
选择图标
-
将购物车中的图标, 添加至项目
添加至项目 -
会自动跳转到我的项目
项目页面 -
在
更多操作中选择编辑项目更多操作 -
将
FontClass/Symbol 前缀编辑一下, 规范化, 并且不要和element-ui中的前缀重名.FontFamily可以随意编辑项目 -
选择
编辑图标, 将图标的名称规范化编辑单个图标 -
修改标签名
修改标签名 -
全部完成后, 点击
下载至本地, 将项目中的图标全部下载下来.
下载项目至本地 -
下载的文件为一个zip的压缩文件, 加压后可以看到如下内容:
文件内容
项目中的操作
-
将文件复制到项目的
assets/icon目录下复制图标文件 -
修改
iconfont.css文件[class^="el-icon-newfont"], [class*=" el-icon-newfont"] { font-family: "FontFamily" !important; font-size: 12px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }注意: 第二个
class中有个空格,font-size可以调整图标字体的大小
iconfont.css 文件的所有内容如下:
@font-face {font-family: "FontFamily";
src: url('iconfont.eot?t=1548124350966'); /* IE9 */
src: url('iconfont.eot?t=1548124350966#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARoAAsAAAAACJQAAAQZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEYIQMATYCJAMMCwgABCAFhQUHOhtuB1FUTapkPwrcPUXYFmGihNiEIf/wJvxbHjjj4b/9WPfNDOoNmog0yyTRiDcOGV/xGrZtKBuSl/Dvf26ohHqvb1gkiUif3P8zOTR0WiZlD42BvDTp7VWDQWHyNcrnuSZfEX47AKhepnVg0kAnOLCkCt8bnQ2HBYgbxm6iPIjLBBr1E0Q3B7NdJKMA6wJxo3Mpkkn5lZrOUC/Ulmws4psa9el92sRX/vv4bzbqSWoycNXOWV+NtH7VPH/IsdWD4/zodbwotG1kjIsoxGlpfF88LI6La3TMRH1jrSKksTJVBeCia9eu9I+XiFrAbBaZ4VLiVw1mCX598EsilVfXogHfiRDc3X176gbSsfOwEYA4wOmQWEFKeCpWtnA0fZwcYV3FPj5G4kRgFNnAOTqyZy0kLYwlgyGkGLuQlPIQODqCM3TgtrWMDZ6FOGVkAGzZk25HOngsTT4eHXwigJaMkIFFVaRQaS1V35EGTssMDVpCwe7TRgaUkUKdhy7F7eUVFOjOiXD5+PIiK1TITl5MDhbXUKATJ0fyAYeHklChbXM7NRhHgZYMtcWSJqPY5mUDHFdMKlpYSgbBTdxIcSMpb2EZjLawR08JAEVNG4A0W9fvXyQWxP/zKnH/f/8+N5bOxJqYwGTJiJ2dLi+fnQVIZ2EmJm73XIWIIUL4+Dgubm/fGfuDlS2DpgGm/vS0HqNy9PQU3KrSGvwp4ZMSsFIpeV0DgCfYcMIUxxkIktIgN8MzC3EbqaZ8AV7is13HX0MjcBylpsHh+Vf30ewvYJ41AAWj3UadNUTtludBqeLmQV8hKr+vL++zwrIHfU6xCD/fgWy7t0GfUFN8c1JNUUF9fDNSMxGtkEHfV30vQhcQINo4O58UDGGZYA5dEnE1pmiR9OD+n2uc65M9dmiXS8EEhZXapvWnm+Adt3MlF7VR7+HhM+LiAbYiRFDdF7+SA9GIEi4dN10uHJFNef1rPU4BP2/qprnaLkn9y0kEPztaVCD8LlxFDORiG2pFv5I9qnuVvMjrKRWQ7vTrb/WMLtJko54YSZ0BZI0GicJMo0aTVb1WsrdENBqz3N6ky01clAaMugsI3R5IWv1A1u1JFOaPGr0RqNUdfWi0G2MHNhmMx0aVACVCFezDwM3BdRiKUm6bvDeQbN26bpAfLSnI9IXvHDAIddcBIX7BgsoQHQzGmh8QzBuBgQyc/V0b6q9Dy3LB1981UKGKayB5TQEB57IHVRx87EjOhgCSEKQCsiugU7gcjJZJznZ4zIDEprNcbSDuqE+XBLUj8/UHKBCKQvnsoK6i1ooYmk7LoWs7JnTCNRDCACYQ0jYYYxGyWFzAK9cNsVlBKrQeeU9TFU5ibc3Krm37WevEMcBBOVLkKOpukUh3eOrOkVlMjUQAAAAA') format('woff2'),
url('iconfont.woff?t=1548124350966') format('woff'),
url('iconfont.ttf?t=1548124350966') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1548124350966#FontFamily') format('svg'); /* iOS 4.1- */
}
.FontFamily {
font-family: "FontFamily" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^="el-icon-newfont"], [class*=" el-icon-newfont"] {
font-family: "FontFamily" !important;
font-size: 12px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.el-icon-newfont-setting:before {
content: "\e605";
}
.el-icon-newfont-unbind:before {
content: "\e68a";
}
-
在
main.js中引入iconfont.css文件import '@/assets/icon/iconfont.css'引入样式文件 -
使用图标
用
icon引用:<el-button type="primary" title="管理公众号" icon="el-icon-newfont-setting" //图标名 size="mini" @click="manage(scope.row.appId)" circle/>用
class引用:<el-button type="primary" title="管理公众号" class="el-icon-newfont-setting" //图标名 size="mini" @click="manage(scope.row.appId)" circle/>
在线引入css
获取在线样式地址
在 vue 项目中的 App.vue 文件中添加这个引用(每次添加新图标到 iconfont 中的购物车、项目之后更新这个链接即可）
用 less 样式引入
</style>
<style lang="less" scoped>
@import url(//at.alicdn.com/t/font_1026187_okd0aeilrwg.css);
</style>
在 el-input 上使用图标
<el-input
placeholder="设置"
suffix-icon="el-icon-newfont-setting"
v-model="input2">
</el-input>
