阿里巴巴矢量图库，图标导入的简单使用

最新推荐文章于 2023-06-19 16:02:01 发布
最新推荐文章于 2023-06-19 16:02:01 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： javaWeb 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46049759/article/details/120576059
版权

文章目录

引言

这个东西刚学用起来比较奇怪，刚刚搞了一下【Unicode】这一栏的引用方式

感觉还是很简单的，但是他自带的那个文档描述不知道是不是我太蠢了，我试了好几次都没成功
就是下图这个介绍，真的是搞人心态，我还是翻了以前的才找到咋写的

在这里插入图片描述

=正文开始=

下载素材

1.第一步添加素材

看到这个小购物车了吗，喜欢啥icon就点一下这个，可以加到购物车中，最后同一处理
在这里插入图片描述

2.将购物车中iocn添加到项目中

在这里插入图片描述

如果有项目，直接添加没有就创建一个
在这里插入图片描述

3.下载项目

添加到项目完成之后，会默认跳转到自己的项目库
这个时候点击下载就行了
在这里插入图片描述

使用素材

1.文件解压缩

2.将解压后的文件拉入自己的网页项目中

在这里插入图片描述
像图片上这样

3.如何使用

使用时候很简单
1.link导入【iconfont.css】
2.使用某个图标时直接调用类名就可以了，同时还要用【iconfont】这个类
<span class="iconfont icon-shoujiapp">45555</span>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>矢量图标</title>
    <link rel="stylesheet" href="./src/font_2580298_yrwio37l9dp/iconfont.css">
</head>
<body>
    <span class="iconfont icon-shoujiapp">45555</span>
</body>

</html>

4.简单修改颜色大小

直接在【iconfont.css】 中找到自己需要的图标，在对应类中通过字体的修改方法进行修改图标颜色即可
在这里插入图片描述

嘻嘻你好呀
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何轻松使用阿里云得矢量图标库
qq_45036013的博客
04-09 1987
一.前提条件: 请申请一个github账号, 大致步骤如下:申请一个邮箱账号(最好是阿里云的)—>访问github官网(https://github.com/)点击sign up进行注册(注意要按照要求来注册,否则很容易不成功)–>登录github 账号(第一次登录时,可能要验证邮箱地址才能新建仓库,不要忘记进入邮箱点击github发送至邮箱的验证邮件). 二.基本步骤: 进入icon...
sbc-satou.github.io:阿里云兼容版本的draw.io
05-25
概述 与阿里云兼容。 执照 该工具是基于创建的。该许可证基于 。 如何使用 在浏览器中访问 。 系统将询问您是否要打开现有图，选择Create New Diagram 。 在模板选择屏幕上，从“ Cloud类别中选择任何阿里云模板（ cloud/aliyun_xxx.xml ），然后按“ Create按钮。 ※即使您是从空白模板创建的， blankDiagram选择blankDiagram而不是cloud/aliyun_blank_template.xml 。 因为阿里云图标显示在左侧菜单上，所以我们来画!! 很重要的一点 在网站公布， Github的Github Pages已经使用功能的托管。因此，在线功能（Google云端硬盘集成/ Github集成等）受到限制。 仅当在上述过程中指定了阿里云模板时，才会显示阿里云形状（图标集合）。当指定其他模板或从＋More Shapes中指定时，无
Draw.io用阿里云3D矢量图标库-2022大数据
06-19
Draw.io用阿里云3D矢量图标库-2022大数据，使用请参考：[draw.io使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制](https://blog.csdn.net/weixin_44479533/article/details/131289488)
阿里云产品图标（中国站2019）.pptx
04-29
2019年版阿里云产品图标大全，包括弹性计算、存储与CDN、数据库、网络、安全、云通信、互联网中间件、移动云、应用服务、分析与搜索、域名与网站、管理与监控、视频服务和物联网
阿里云拓扑ICON图标矢量素材
02-19
阿里云所有产品资源ICON图标矢量素材下载 包含弹性计算、数据库、域名网站等
常用工具栈
hezhanran的博客
08-25 575
前言         在过往的工作中，参与了很多不同的项目开发，期间借助了很多不同的工具，个人的一个爱好就是收藏软件工具，这里做下记录。 工具 网络工具 网络抓包工具：Wireshark，https://www.wireshark.org/download.html 网络限速工具：Netlimiter，https://www.netlimiter.com 弱网模拟工具：clumsy，https://jagt.github.io
drawio使用阿里云矢量图标库进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图等绘制
寻找未来的世界
06-19 4794
drawio使用阿里云矢量图标库可进行流程图、泳道图、UML、BPMN、架构图、部署图、原型图、用户故事图、ER图等软件开发设计及架构图的绘制，导出无水印，操作便捷，是替代Visio及Processon等的不二选择。下载对应的资源，开启draw.io应用软件，从菜单依次点击"File"->"Open Libary…"选择对应的xml文件（3D压缩包需先解压缩），即可在draw.io中载入阿里云矢量图标库。
diagrams-net-azure-libraries：这是Diagrams.net（https：app.diagrams.net）（以前称为Draw.io）的图标库的集合。
01-29
diagrams-net-azure-libraries：这是Diagrams.net（https：app.diagrams.net）（以前称为Draw.io）的图标库的集合。
如何引用阿里云矢量图标库
热门推荐
一颗程序猿
11-14 1万+
如何引用阿里云矢量图标库 二、使用方法 1、方法一：font-class引用 2、方法二：symbol引用 3、方法三：unicode引用
Axure 9怎么导入阿里巴巴矢量图标的Iconfont图标
colin5210的博客
09-02 3599
5、然后选中图标右键，点击变换图片，将SVG转换为形状即可。3、点击复制SVG代码（两种方法复制svg代码）a、登录iconfont,点击下载复制SVG代码。2、在iconfont上找到要使用的图标。4、Ctrl+V粘贴到Axure里。1、打开Axure，新建一个页面。
draw.io：draw.io图库
02-18
draw.io：draw.io图库
Draw.io 又名 diagrams
08-14
Draw.io 是一个很好用的免费的在线流程图绘制工具。你可以利用 Draw.io 绘制一系列的图表、图示或图形，包括流程图、UML 类图、组织结构图、泳道图、E-R 图、文氏图等等，适用于商务、工程、电气、网络设计、软件设计等诸多领域的专业绘图。 Draw.io 现已改名为 Diagrams.net，它致力于成为完全开源、免费、并且高质量的绘图软件。它内置了相当丰富的绘图资源，包括各类形状、图标、连接器、模板，能满足绝大大多数的绘图需求，还可以导入第三方图标资源满足更多需求，完全可以取代微软 Visio 等流程图软件。 本站已制作成绿色免安装版 下载解压后可以直接运行 draw.io.exe 即可打开软件。 如果需要关联 Draw.io 的工程文件 *.drawio 以及 *.vsdx 文件，请运行 [Draw.ioPortable].exe 完成设置。 要彻底删除本绿色版，关闭软件后再次运行 [Draw.ioPortable].exe 选择「删除」操作，会彻底清理桌面版所有相关配置与数据。
draw.io：在draw.io上创建的图的存储库
02-13
draw.io 回购在draw.io上创建的图
阿里巴巴矢量图标批量下载 IconontDownload.js
09-04
如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。
如何在项目中使用阿里巴巴矢量图标
最新发布
03-27
阿里巴巴矢量图标如何使用有一个demo
copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载
05-11
一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。 苦于每次想要使用图标库 的图标都需要下载图标===拉到文件夹====写文件路径/...
阿里巴巴 矢量图 流程图 json 格式
08-17
https://www.iconfont.cn/ 阿里巴巴 矢量图 https://app.diagrams.net/ 流程图 https://tool.jisuapi.com/json.html json 格式
CSS运用阿里巴巴矢量库快速在对应位置加上好看的图标效果(实例代码)
11-21
进入阿里巴巴矢量图标库 阿里巴巴矢量图标库 选择喜欢的图标的，点击添加到库 选择完之后，点击右上角的购物车图标（前提是已经登录，推荐使用GitHub登录） 然后在右侧中点击添加至项目 之后在个人主页中可以...
【drawio笔记】在图表中插入SVG图像
03-14 6187
在图表中插入SVG图像 使用以下方法之一将可缩放的SVG图像插入到图表(diagram)中。 将SVG图像文件从你的计算机中拖放到绘图画布(drawing canvas)上。 将SVG图像的URL从你的浏览器拖到绘图画布上。 选择 Arrange > Insert > Image，然后将图表文件或URL拖到对话框中，然后单击Apply。 选择 Actual Size 以确保你的SVG图像被插入。 将SVG图像作为形状添加到绘图画布后，即可调整其大小。 注意： 你不能导入图表的SVG
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值