vue中通过在线链接使用iconfont阿里图标库FontClass

看项目原来的都是将图标下载到本地，然后引入css文件。查了些文章也都是介绍的，先将图标下载到本地再导入。
那么在项目开发中，时不时就会需要加入新的图标。这时候每次都要重新将图标下载到本地再导入。觉得十分麻烦。

这里介绍用在线链接来引入。更新图标后只需要替换iconfont生成的链接。

加图标加入导项目后，选择font class 。生成链接，复制这个链接。

2.在assets下新建一个icons文件夹，并新建一个css文件。

3.在css文件里，通过@import 刚刚复制的链接

在main.js里面引入这个css文件。
使用图标
完成以上步骤后，已经可以在vue文件里使用图标了。

新加图标后，更新链接。并且在项目中替换成这个新的链接。

这样每次更新图标，我们只需要在css文件里替换掉链接就可以了。

vue中通过在线链接使用iconfont阿里图标库FontClass相关推荐

vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...
vue页面和nvue页面、引用阿里图标库-图标方法
iconfont-阿里巴巴矢量图标库选择所有要使用的图标加入购物车如下图下载下载后下面的3个图标可以任意使用后期如果增加了图标需要重复以下步骤并且把 .ttf 这个文件替换掉项目 ...
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 2018-11-9更新 VX号: LJT-917 这是我的微信公众号全是技术文章: 1.傻瓜式引用:由于这种方法及其 ...
优秀工具介绍之——Iconfont 阿里图标库
阿里妈妈MUX倾力打造的矢量图标管理.交流平台. 设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用. 官网地址: h ...
java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
使用在线链接阿里图标库（iconfont）(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
Vue - 项目中使用iconfont（阿里图标库）
项目中如何使用iconfont(阿里图标库) 一. 登陆iconfont官网: https://www.iconfont.cn/ 二. 创建一个图标项目 1.点击"图标管理"子目录 ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
Vue如何使用iconfont（阿里图标库）
1.在iconfont上任意方式登录 2.选择图标管理下,我的项目 3.新建一个项目(如果已有项目可忽略) 4.创建好之后就可以找自己要用的图标,添加到自己的项目里 5.图标添加完毕后,再次回到我的项 ...

vue中通过在线链接使用iconfont阿里图标库FontClass

vue中通过在线链接使用iconfont阿里图标库FontClass相关推荐

最新文章

热门文章