iconfont-阿里巴巴矢量图标库使用教程_iconfont阿里巴巴-程序员宅基地

技术标签： css  html5  web  Web前端技术基础  前端  网页设计  

iconfont-阿里巴巴矢量图标库使用教程

文章目录

一、前言

  1. 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要是两倍尺寸的，这对于设计师来说，成本太大（虽然这是趋势）。

  2. 让样式回归CSS具体而言，就是指使用iconfont后，因为图标就是字体。我们可以用CSS来灵活控制图标的大小、颜色、阴影等。传统的 CSS Sprites 我们只能重新设计后再「切图」，虽然现在有很多自动拼合工具，但是依然繁琐。进一步的，如果不用兼容IE6-7后，我们完全可以用CSS伪元素来生成图标。也就是说假如图标编码改变了，不用再改动HTML中的编码，只用修改 content 中的编码，达到真正目的上的CSS来控制图标。

  3. 图标规范化通过iconfont平台，我们可以高效快速的生产出规范的图标。现在可以直接通过平台上传SVG或ESP文件，就可以转换成字体图标了。

  4. 自动上传到阿里云CDN通过平台生成的字体，自动存储到阿里云CDN，免费加速。

  5. 流量最小化在移动设备，节约流量是我们前端把控用户体验关键而又容易忽视的一个环节。通常一个项目中，我们并不需要一套大而全图标库，也许我只是需要其中的一个关闭按钮(o)/~。通过平台可以点选自己需要的图标，重新生成一份字体，减少字体体积，节约流量的同时带来更快的加载速度。

二、使用步骤

1.打开iconfont-阿里巴巴矢量图标库，搜索图标，选择合适的图标批量加入购物车(如果是单个矢量图直接下载也可以)
在这里插入图片描述

2.在右侧点击购物车

image-20211226204901441

3.在购物车中，推荐是使用添加项目，在账户内新建一个项目下次使用的时候，方便下载。这里我们用作HTML开发所以点击下载代码。(下载素材是用于SVG、AI、PNG的）
在这里插入图片描述

4.下载项目需要的矢量图，第三步点击下载代码可以跳过这步。

在这里插入图片描述

5.将下载好的压缩包解压，以下文件全部导入HTML项目下css文件中

image-20211226205658807

7.在iconfont.css中可以设置图标的样式，这里我默认，一般不作修改。

.iconfont {
    
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

如果想单独修改某个图标的大小样式，可以为span标签单独设置一个class

.iconfont2 {
    
	font-family: "iconfont" !important;
	font-size: 160px;
	font-style: normal;
	color: #BD2C00;
	background-color: #B3D4FC;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

8.在HTML文件中，第六行导入刚刚下载的iconfont.css,第九行挑选相应图标并获取字体编码，应用于页面
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/iconfont.css">
	</head>
	<body>
		<span class="iconfont">&#xe71c;</span>
		<span class="iconfont2">&#xe606;</span>
		<span class="iconfont">&#xe645;</span>
		<span class="iconfont">&#xe609;</span>
	</body>
</html>

三、运行效果

image-20211226222451718
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49488584/article/details/122162922

智能推荐

Spring(五）Spring整合Hibernate-程序员宅基地

文章浏览阅读275次。Spring整合Hibernate_spring整合hibernate

Eclipse 常用快捷键及使用技巧-程序员宅基地

文章浏览阅读78次。做 java 开发的，经常会用 Eclipse 或者 MyEclise 集成开发环境，一些实用的 Eclipse 快捷键和使用技巧，可以在平常开发中节约出很多时间提高工作效率，下面我就结合自己开发中的使用和大家分享一下 Eclipse 中常用到的快捷键和技巧。15 个 Eclipse 常用开发快捷键使用技巧1、alt+?或alt+/：自动补全代码或者提示代码这个是我最得意的快捷键组..._eclipese 使用技巧大全

42 SAP报错：作业类型 ACT001 没有为成本中心 1088 1200990001 设置(Activity type ATC001 not set up for cost center XXX)_作业类型 lab 没有为成本中心 ql99 1001 设置-程序员宅基地

文章浏览阅读567次，点赞6次，收藏11次。解决方案：CO模块使用前台事务码KP26维护活动类型价格，即可。业务操作：PP模块前台事务码CR02维护活动类型时，报错如上。报错原因：CO模块没有为活动类型进行价格维护。CO模块KP26维护作业类型价格完毕。2024年1月26日 写于上海。事务码KP26进入，_作业类型 lab 没有为成本中心 ql99 1001 设置

TortoiseGit解决TortoiseGitPlink要求输入密码-程序员宅基地

文章浏览阅读3.2k次，点赞4次，收藏10次。解决TortoiseGitPlink要求输入密码_tortoisegitplink

什么是大端存储和小端存储-程序员宅基地

文章浏览阅读4.7k次，点赞2次，收藏5次。详细了解大端和小端的存储_大端存储和小端存储

【共读】企业信息安全建设与运维指南（一）_信息安全运营服务实施指南研究-程序员宅基地

文章浏览阅读6.3k次，点赞5次，收藏49次。一、从零开始建设企业信息安全系统：企业信息安全体系分为：信息安全技术体系和信息安全管理体系 信息安全技术体系： 两个层面： 1.需建设安全相关基础设施和系统，以具备解决相关安全问题的能力。 2.需具备安全运营能力，只有正确部署和使用设备，才能真正保障信息安全。 信息安全管理体系： 两个层面： 1.具备信息安全相关的制度、规范、流程及策略。 2.具..._信息安全运营服务实施指南研究

随便推点

关于Error in callback for watcher “data“: “TypeError: data.indexOf is not a function“的错误_error in callback for watcher "data": "typeerror: -程序员宅基地

文章浏览阅读2.8w次，点赞10次，收藏12次。关于Error in callback for watcher “data”: "TypeError: data.indexOf is not a function"的错误说明原因：表格显示需要数组包含对象的形式，每个对象是一行数据，拿到的数据格式不对。错误例子：从后台获取数据res.data,显示在表格中。只有一条数据，六个内容，应该是一行六列，但是出现了六行六列，且都为空。报三个..._error in callback for watcher "data": "typeerror: data.indexof is not a func

Tomcat Session(CVE-2020-9484)反序列化漏洞复现_禁止使用session持久化功能filestore-程序员宅基地

文章浏览阅读1.2k次。北京时间2020年05月20日，Apache官方发布了 Apache Tomcat 远程代码执行 的风险通告，该漏洞编号为 CVE-2020-9484。Apache Tomcat 是一个开放源代码、运行servlet和JSP Web应用软件的基于Java的Web应用软件容器。当Tomcat使用了自带session同步功能时，使用不安全的配置（没有使用EncryptInterceptor）会存在反序列化漏洞，攻击者通过精心构造的数据包， 可以对使用了自带session同步功能的Tomcat服务器进行攻击。_禁止使用session持久化功能filestore

java漏洞提权_CVE-2018-3211：Java Usage Tracker本地提权漏洞分析-程序员宅基地

文章浏览阅读170次。一、前言我们发现Java Usage Tracker中存在设计缺陷(或者脆弱点)，攻击者可以利用该缺陷创建任意文件、注入攻击者指定的参数以及提升本地权限。这些攻击手段也能组合使用实现权限提升，以便访问受影响系统中其他应用或者用户不能访问的某些保护资源。我们通过Zero Day Initiative与Oracle合作修复了这个漏洞，厂商已经在10月份补丁中推出了安全更新。因此，用户以及企业应当尽快安..._java防范代码问题的提权脱库

关系型数据库（Sql）和非关系型数据库（NoSql）区别_sql关系 非关系-程序员宅基地

文章浏览阅读1.8k次。Sql与NoSql的区别Sql与NoSql的区别数据库关系型数据库非关系型数据库Sql与NoSql的区别数据库1.简单来说，就是存放各种数据的一个仓库，也就是一些数据按照某种模型存放到存储器的一个数据集合。简称DB,DataBase2.那么，数据有了，就需要管理，用来操纵和管理数据的软件就是数据管理系统 简称DBMS,DataBase Managent System3.那么 把上面这两个放到一起，也就是带有数据库并配置了管理系统的计算机系统 就是数据库系统 简称DBS，DataBase Syst_sql关系 非关系

MATLAB实现imrotate函数_imrotate函数matlab-程序员宅基地

文章浏览阅读5.1k次，点赞2次，收藏11次。编写算法实现图像绕中心点旋转功能先找到四个顶点旋转后的位置，然后求出新图像的大小找到旋转后的图像对应的原图像的位置，将原图像的颜色属性赋给相应位置的新图像(旋转思想为先将图像中心点移到坐标原点，然后进行旋转，最后再将坐标值换为实际的坐标值进行像素颜色属性的赋值)a=input('Enter the picture address:');b=input('Enter the angle:');R..._imrotate函数matlab

upstream server temporarily disabled while connecting to upstream(记录bug)-程序员宅基地

文章浏览阅读1.2k次。nginx连接上游服务器时，上游服务器暂时禁用问题解决_upstream server temporarily disabled while connecting to upstream

推荐文章

热门文章

相关标签