阿里iconfont图标的引入与使用:

1.方案一使用线上链接:

【1】官网=》将需要的加入到购物车=》添加至项目（或新建）

【2】在第三步=>点击项目设置

【3】资源管理=>我的项目

【4】将跳转到页面代码复制到iconfont.css

【5】全局注册使用main.js

// 加载图标样式
import "@/styles/iconfont.css"  //引入存放的iconfont.css文件

【6】使用：

 <i class="iconfont icon-shipin"></i>视频    //iconfont和icon-是第二步圈起来的

2.方案二下载使用:

前三步相同,后面改为点击=>下载至本地

保留这四个文件,其余步骤都一样

阿里iconfont图标的引入与使用:相关推荐

Hexo博客之优雅使用阿里iconfont图标
前言为什么写这篇文章? Font Awesome 无论是 v4 还是 v5 图标都有一些局限性.因此不少小伙伴想到了使用阿里 iconfont 图标.然而很多小伙伴并不是前端这个专业,可能对使用图标 ...
VUE在线调用阿里Iconfont图标库
前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网 ...
vue项目中使用阿里iconfont图标(下载并在本地引用)
vue项目中使用阿里iconfont图标(下载并在本地引用) step1 step2 step3 在scr/asstets/css目录下新建icons文件夹,把图中所需要的四个文件放进去即可记得在m ...
Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标 Hexo系列文章已经完成上传: 一.Hexo准备-Node.js.Vue 二.Hexo.主题.部署上线三.Butterfly美化四.Hexo之更换背景及透明 ...
vue项目中如何使用阿里 iconfont图标
先登录阿里 iconfont 图标库:https://www.iconfont.cn/ 1.选择需要的图标添加到购物车中 2.在资源管理里面 --我的项目: 添加新项目这样的话就会永久保存了. 3. ...
ant-design-vue自定义使用阿里iconfont图标
ant-design-vue自定义使用阿里iconfont图标 ant-design-vue与vue-admin-element引用iconfont图标还是有点区别的,具体步骤如下: 第一步:从ico ...
vue-cli通过symbol引用阿里iconfont图标
官方文档中已经说明symbol引用方式有以下特点: 支持多色图标了,不再受单色限制. 通过一些技巧,支持像字体那样,通过font-size,color来调整样式兼容性较差,支持 ie9+,及现代浏览 ...
uView 扩展图标(使用阿里iconfont图标)
uView引用阿里图标步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理---- ...
接入阿里iconfont图标库详细教程
1:注册账号点击链接进入阿里iconfont官网,用手机号注册并登录. 2:创建项目 2.1:选择资源管理-我的项目 2.2:点击新建项目,填写项目名,其他的默认选择,点击新建即可. 2.4:也可以 ...

阿里iconfont图标的引入与使用:

1.方案一使用线上链接:

2.方案二下载使用:

阿里iconfont图标的引入与使用:相关推荐

最新文章

热门文章