阿里font图标使用流程
- 一、 找到对应项目,点击下载至本地,
- 二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.
- 三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,
- 四、在main.js全局引用,注意文件路径不要写错
- 五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下
- 六. 在main.js 全局注册第五步的组件
- 七. HTML中使用,item.icon内容对应你图表库里的名称,style根据需要设置你的字体图标大小
- 八. 页面中显示效果
- 九.项目增加图标后,更新的方法:先执行第一步下载zip文件,然后同样的执行第二步解压复制全部文件,再粘贴到你的iconfont文件夹下,提示’同名文件是否全部覆盖?’ 全部选是. ok图标新增更新完成
一、 找到对应项目,点击下载至本地,
二、将下载好的压缩包解压,下图是解压后的文件夹,然后打开后将里面的文件全部复制.
三、在项目static目录下新建文件夹iconfont,目录结构名称自己定义都可以,将复制的文件粘贴到这个文件夹下,
四、在main.js全局引用,注意文件路径不要写错
import Vue from 'vue' import '../static/resources/iconfont/iconfont.js' import '../static/resources/iconfont/iconfont.css' 五、在components下新建文件夹SvgIcon,里面新建index.vue文件.代码如下
六. 在main.js 全局注册第五步的组件
import SvgIcon from './components/SvgIcon' Vue.component('SvgIcon', SvgIcon) 七. HTML中使用,item.icon内容对应你图表库里的名称,style根据需要设置你的字体图标大小
<svg-icon :icon-class="item.icon" style="width:2.4em;height:2.4em" /> 
八. 页面中显示效果
九.项目增加图标后,更新的方法:先执行第一步下载zip文件,然后同样的执行第二步解压复制全部文件,再粘贴到你的iconfont文件夹下,提示’同名文件是否全部覆盖?’ 全部选是. ok图标新增更新完成
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/203486.html原文链接：https://javaforall.net
