分享一下刚学会的，阿里矢量图在线引入的方法

最新推荐文章于 2023-07-13 17:29:25 发布
最新推荐文章于 2023-07-13 17:29:25 发布
阅读量510 收藏
点赞数
分类专栏： 自我总结 文章标签： css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48802343/article/details/120369457
版权

第一步

：去官网下载自己想要的矢量图

第二步

：把矢量图添加到项目中

第三步

：生成在线链接
在这里插入图片描述
得到这么一串：//at.alicdn.com/t/font_2554789_if9k02wroz.css

第四步

：创建一个css文件

第五步

：在css文件中通过import引入：@import url(//at.alicdn.com/t/font_2554789_if9k02wroz.css);

第六步

：在自己想用的界面引入通过：

<span class="iconfont icon-VIP"></span >
黛玉葬花也葬你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里矢量图引入方法
海贼王路飞 同学
01-15 2078
** 阿里矢量图引入方法 ** font-class引用方式引用： 引入下载文件中的css文件与js文件 在你的文件里面引入这个地址 然后再内容标签里写入  本人一直在用这种方法，推荐使用 与unicode使用方式相比，具有如下特点： 兼容性良好，支持ie8+，及所有现代浏览器。 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。 因为使用class来定义图标，所以当...
Vue项目如何引入阿里巴巴矢量图
最新发布
m0_70569539的博客
03-16 619
2.将本地文件的压缩包解压缩，并将里面的文件复制到项目中。4.在使用图标的时候注意加上 iconfont 前缀。3.在main.js文件中引入图标库的css文件。1.选择自己喜欢的图表并将其加入购物车中。2.将购物车中的图标添加至项目。1.先进行下载到本地。
阿里矢量图在线引入使用步骤
qq_46372132的博客
07-13 255
一定要带上iconfont类名，后面的类名是你所使用的图标类名。在需要的文件中使用图标 class=“图标类名:在我的项目中添加了复制即可用。4.完成 ,在页面上就可以显示图标了。2.在项目引入这两个链接。
vue项目中如何引入阿里矢量图
weixin_45645412的博客
03-03 2336
1.首先去阿里矢量图官网 https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1 2.在阿里矢量图官网把我们需要的矢量图加入到购物车里面 3.加入到购物车以后打开右上角的购物车图表，会在右侧弹出一个页面 4.然后我们选择添加至项目，然后在右上架有一个加号，点击加号，然后定义一个文件名， 名字可以随便定义 5.定义完文件名以后，点击确定，会跳转到你选择矢量图的那个页面，切记
在项目中引入阿里矢量图标
gzhang1018的博客
04-20 694
1、在阿里矢量图标库将想要的图标加入购物车，然后在购物车中将图标添加到项目； 2、到我的项目中，将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹（名字自定义），将刚刚下载下来的代码包中的 iconfont.css、 iconfont.eto、 iconfont.svg、 iconfont.ttf、 iconfont.woff 复制到iconfont文件夹下。 ...
Draw.io用阿里云3D矢量图标库-基础图形
06-19
Draw.io用阿里云3D矢量图标库-基础图形，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
阿里巴巴 矢量图 流程图 json 格式
08-17
https://www.iconfont.cn/ 阿里巴巴 矢量图 https://app.diagrams.net/ 流程图 https://tool.jisuapi.com/json.html json 格式
Draw.io用阿里云3D矢量图标库-2022大数据
06-19
Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
Vue自定义指令结合阿里云OSS优化图片的实现方法
01-19
图片往往在加载前端项目中占大头，如何既不损失图片质量，又提升加载速度呢？ 根据显示设备pixelRatio和元素宽高来显示合适图片 略微压缩图片质量 使用webp ... Vue.directive('img-condense', { ...
Draw.io用阿里云3D矢量图标库-2022企业应用
06-19
Draw.io用阿里云3D矢量图标库-2022企业应用，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制]...
阿里巴巴矢量图标如何引入项目
一个在全能之路上越走越远的男人。
07-18 4496
一:单个图标的引用方法，直接下载，选择样式，当做图片引入项目即可 二：多个图标的引入方法： 选择图标，点击的不是下载了，而是加入购物车，然后右上角的购物车里面数字一直增加，点开。如下图。添加到项目里面，然后可以打开自己的项目，没有就新建一个项目。完成后，进去项目管理界面，点击查看在线连接，会让你生成代码连接，复制生成的连接，打开新的界面，复制里面的css代码，保存到项目中,r然后引入CSS的方...
css引入矢量图标_蘑菇博客前端页面如何引入矢量图标
weixin_29665183的博客
01-09 908
前言大家好，我是陌溪蘑菇博客前端页面最开始使用的图标都是一张张的 png 图片，在不同的分辨率上会出现失真的情况，后面在其它小伙伴的介绍下，我了解到了矢量图标。矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、...
阿里矢量图引入的具体方法，详解！
keep hungry , keep active
07-31 5005
很多刚入门的小白写站的时候都会碰到一个问题，不知道怎么引入矢量图，今天拿阿里矢量图来给大家简单分享一下具体的方法。 首先，去官网找到你所需要的的图标，拿购物来举例，，如图，将鼠标放到上面会有三个选项，点击加入购物车， ， 点击“下载代码”，保存到你已经新建好的文件夹， （为了方便识别，重命名了一下），下一步是解压文件，咱们可以选择直接将解压到的地址选择为 你所要写的站的css文件中，也...
如何将阿里图标库导入到自己的项目中？
热门推荐
baidu_28629907的博客
04-25 2万+
前言一开始做网站时，设计师丢了一个psd过来，图片需要自己切，图标需要自己找，徘徊在font awesome和iconfont之间，最后终究还是被海量图标的iconfont吸引了，然后一直在寻找导入项目方式，最后终于找到两种办法；前提是这个iconfont你要先登录一下，才能进行下面操作；1、如果你的项目比较小，且所需图标较少，建议使用icon官网推荐的下载单个icon的方法然后项引用图片一样的引...
引入阿里巴巴矢量图图标到HTML页面
weixin_45003922的博客
10-21 2027
1.打开地址：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.注册账号 3.选择图标 点击加入购物车， 4.打开购物车 5.添加到项目 6.打开项目 7.下载图标文件 8.将以下几个文件添加到项目文件夹中，可以重新创建一个文件夹 9.创建一个.css文件，按照以下写好内容 10.在HTML中使用link标签导入css文件 11.在需要添加图标的位置添加 其中class是创建的css文件中font-famil
【095】Iconfont-阿里官方图标库和插画库
ONET一站的博客
01-21 1321
在海报、新媒体宣传品、PPT等内容的设计中，使用合适且精美的图标和插画，会提升设计的观赏美感。今天分享一个阿里官方的矢量图标和插画库，素材质量很高，适合作为设计者的资源库。 地址：参见文末图 Iconfont首页默认展示矢量图标包，顶部可以选择查看矢量图标或插画。使用者无需注册即可免费预览查看，如果要下载素材需注册，注册也很简单，比某些收费素材库靠谱。 ONETer随便用一套矢量图标包举例，每一歌矢量图标包的素材风格基本统一，喜欢的素材可以收藏或下载。目前Iconfont收录了近2000万..
阿里巴巴矢量图标库在线链接用法
qq_60268610的博客
11-21 4118
阿里巴巴矢量图标库链接引入使用方式。
阿里矢量图标
x0572_的博客
07-27 681
矢量图标
CSS 中 @import url（）
yuxisanno139的专栏
10-09 1229
@import url（）总结： 1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。 2，@import 是css2里面的，所以古老的ie5不支持。 3，当使用javascript控制dom去改变样式的时候，只能使
阿里巴巴矢量图标引入
07-27
要将阿里巴巴矢量图标引入您的项目中，您可以按照以下步骤进行操作： 1. 首先，访问阿里巴巴矢量图标库（https://www.iconfont.cn/）并注册一个账户。 2. 登录后，搜索您需要的图标并选择合适的图标。 3. 在图标...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值