阿里巴巴矢量图标库的使用

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具icon-default.png?t=N7T8https://www.iconfont.cn/

今天来介绍一下阿里巴巴矢量图标库的使用

在使用前需要先登录,这里可以使用微信、Github、新浪等方式登录,这个自行选择即可

 

方法一:直接下载图片 

在我们搜索想要的图标后【这里以关键词 “下载” 为例】就会看到以下页面

在这个页面,只要把鼠标移动到想要的图标后就会出现 “下载” 的选项,点击即可 

接下来就会看到下面这个弹窗页面

在这里可以选择颜色、大小等【注意:若一开始是彩色图标,在这里选择一种颜色后,图标会变成单色图标】 

一般下载 PNG 格式即可下载

这种方式是对单一图标下载,也可以先将想要的图标加入购物车,然后再批量下载

下载后就会得到一个压缩包,解压即可获取全部图标图片文件了 

 

方法二:添加至项目【推荐】 

在上一个方法中,批量下载的上面有一个添加至项目的按钮,点击即可 

若没有项目则添加项目即可 

这样方便对图标文件进行统一的集中管理

添加后就会自动跳转至项目图标管理的页面

左侧就是所有的项目,中间就是项目中的所有图标了 

添加到项目后,如何使用这些图标呢? 

选择 “Font Class”,然后点击生成代码

此时可以得到一个链接

接着在 HTML 文件中以外部文件的形式添加这个 css 样式文件 

<!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"><!-- 导入阿里巴巴图标库图标 --><link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4351872_3552ir4aslo.css"><title>Document</title>
</head>
<body></body>
</html>

注意:需要在链接前面添加 “http://” 

然后把鼠标移动到需要使用的图标上,点击“复制代码” 

接着在 HTML 文件中使用

<!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"><!-- 导入阿里巴巴图标库图标 --><link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4351872_3552ir4aslo.css"><title>Document</title><style></style>
</head>
<body><!-- 图标在这 --><span class="iconfont icon-xiazai"></span></body>
</html>

给 i 标签的 class 属性添加值,“iconfont” 以及对应图标的代码 “icon-xiazai”,注意,两者之间需要空格隔开 

这样就可以在网页中看到图标了 

 

使用这种方式的好处:

1、方便管理,

2、不需要有大量图标文件,占用内存 

当然,也可以使用 Unicode、Symbol 等方式,这个跟 FontClass 类似了,就不介绍了

 

一  叶  知  秋,奥  妙  玄  心 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/182633.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【人工智能Ⅰ】实验2:遗传算法

实验2 遗传算法实验 一、实验目的 熟悉和掌握遗传算法的原理、流程和编码策略&#xff0c;理解求解TSP问题的流程并测试主要参数对结果的影响&#xff0c;掌握遗传算法的基本实现方法。 二、实验原理 旅行商问题&#xff0c;即TSP问题&#xff08;Traveling Salesman Proble…

2023最新的软件测试热点面试题(答案+解析)

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

基于Qt QChart和QChartView实现正弦、余弦、正切图表

# 源码地址 https://gitcode.com/m0_45463480/QChartView/tree/main# .pro QT += charts​​HEADERS += \ chart.h \ chartview.h​​SOURCES += \ main.cpp \ chart.cpp \ chartview.cpp​​target.path = $$[QT_INSTALL_EXAMPLES]/charts/zoomlinechartINSTAL…

借助 DPM 代码扫描的力量解锁医疗设备的可追溯性

在当今的医疗保健系统中&#xff0c;医疗设备的可追溯性变得比以往任何时候都更加重要。为了增强现代医疗保健领域的可追溯性和安全性&#xff0c;UDI 条形码充当唯一设备标识的标准&#xff0c;为医疗设备提供唯一标识符。 DataMatrix 代码&#xff08;或直接零件标记代码&am…

初识向量数据库

背景 现在的数据分为20%的传统结构化数据&#xff0c;80%的非结构化数据 结构化数据&#xff1a;主要单元是数值与符号&#xff0c;数据类型高度抽象且易于组织。基于数值运算与关系代数&#xff0c;可以轻松地对结构化数据进行分析。 非结构化数据&#xff1a;常见的类型包括…

【数据库连接池】04:连接池空闲连接回收

连接池空闲连接回收 OVERVIEW 连接池空闲连接回收1.需求分析2.Connection添加字段3.CommonConnectionPool中调用刷新4.CommonConnectionPool中定时扫描CommonConnectionPool.hCommonConnectionPool.cpp 1.需求分析 多余的连接如果超过指定的时间&#xff0c;还没有再次被使用到…

Android 9.0 系统默认显示电量百分比

Android 9.0 系统默认显示电量百分比 近来收到项目需求需要设备默认显示电量百分比&#xff0c;具体修改参照如下&#xff1a; /frameworks/base/packages/SystemUI/src/com/android/systemui/BatteryMeterView.java private void updateShowPercent() {final boolean showin…

函数保留凸性的一些运算,限制为一条线

凸优化在学术研究中非常重要&#xff0c;经常遇到的问题是证明凸性。常规证明凸性的方式是二阶导数的黑塞矩阵为半正定&#xff0c;或者在一维函数时二阶导数大于等于零。但很多时候的数学模型并不那么常规、容易求导的&#xff0c;若能够知道一些保留凸性的运算&#xff0c;将…

linux 账号管理实例一,stdin,passwd复习

需求 账号名称全名次要用户组是否可登录主机密码 myuser1 1st usermygroup1yespasswordmyuser22st usermygroup1yespasswordmyuser33st user无nopassword 第一&#xff1a;用户&#xff0c;和用户组创建&#xff0c;并分配有效用户组&#xff08;初始用户组是passwd里…

11.24 力扣优先队列

题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2]示例 2: 输入: nums [1], k 1 输出: [1] 思路&#xff1a;首先遍历整个数组&#xff0c;并…

Java中的过滤器、拦截器和aop

目录 1、过滤器、拦截器和aop有什么区别及各自的应用场景 2、拦截器和aop的区别是什么 3、举个例子 4、拦截器和过滤器有什么区别 1、过滤器、拦截器和aop有什么区别及各自的应用场景 Java中的过滤器&#xff08;Filter&#xff09;、拦截器&#xff08;Interceptor&#…

97.STL-查找算法 find

目录 STL-查找算法find 1.基本用法&#xff1a; 2.查找自定义类型&#xff1a; 3.查找范围&#xff1a; STL-查找算法find 在C的STL&#xff08;标准模板库&#xff09;中&#xff0c;find 算法用于在指定范围内查找指定值的元素。 功能描述&#xff1a; 查找指定元素&…

YOLOV8解读及推理代码

YOLOV8解读及推理代码 YOLOV8前言性能对比新的骨干网络新的 Ancher-Free 检测头新的损失函数环境配置训练基于python脚本基于命令行 推理pt模型推理onnx模型推理 YOLOV8 前言 YOLOv8并非一个全新的目标检测网络&#xff0c;而是在YOLOv5的基础上进行了升级。其主要升级包括&am…

ASCII sorting

描述 输入一个字符串&#xff0c;对其字符进行排序&#xff0c;输出其字符按ASCII码升序排列。 输入 无空格字符串 输出 按ASCII码升序输出其字符。 样例输入 and 样例输出 adn code&#xff08;c版本&#xff09; #include<stdio.h> #include<stdlib.h> // qs…

LeetCode [中等]和为 K 的子数组

给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 思路&#xff1a; sum: 当前位置的累积和。 如果以当前位置为结尾的数组中&#xff0c;存在和为k的子数组&#xff0c;那么&#xff…

c++之STL

首先我们来仔细研究string 首先我们需要实现string的构造函数和析构函数。有new就有delete. 然后我们实现size()和c_str()&#xff0c;其中c_str就是可以将string类型转换为char*类型返回。 通过运算符重载&#xff0c;我们就可以实现string的[]访问。 然后我们实现和append。 …

超声波水表的量程比是多少?

超声波水表是现代智能水表中的一种重要类型&#xff0c;它采用超声波技术来测量水流速度和体积。量程比作为超声波水表的一个重要指标&#xff0c;决定着其在不同流量范围内的测量性能和准确度。那么&#xff0c;超声波水表的量程比是多少呢&#xff1f; 量程比是指超声波水表最…

2.安装docker

目录 1 安装依赖 2 安装docker 3 测试 目前docker分为三类 Docker-CE(社区版),Docker-EE(企业版)和Moby。Moby是docker社区用户自己写的&#xff0c;所以Moby我们一般用不上 每一类的每一个版本中都有Edge与Stable版&#xff0c;Stable维护4个月&#xff0c;Edge维护1个…

u8g2图形库——丝滑菜单制作

目录 一、实物效果展示 二、丝滑菜单实现原理 三、代码开源 1.ui_bmp.h 2.ui.h 3.ui.c 一、实物效果展示 u8g2图形库——丝滑菜单制作 二、丝滑菜单实现原理 int ui_run(short *a,short *a_tag,uint8_t step,uint8_t slow_cnt) //UI滑动效果 {uint8_t temp;…