在HTML种引用阿里巴巴iconfont字体图标

最新推荐文章于 2023-07-18 09:44:03 发布

二木成林

最新推荐文章于 2023-07-18 09:44:03 发布

阅读量2.1k

点赞数 2

分类专栏： # HTML 文章标签： HTML 阿里巴巴图标 iconfont 图标

本文链接：https://blog.csdn.net/cnds123321/article/details/104185587

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

概述

什么是阿里巴巴iconfont字体图标呢？

iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制。

以前要引用各种图标需要使用的是图标图片，而使用图片需要向服务器请求图片资源，如果有请求次数非常多而用户量又很大那么会很麻烦，造成很多问题，而使用iconfont字体图标，即跟HTML加载一样，减少请求次数，缓解服务器压力。

在国内的阿里巴巴iconfont字体图标网站有很多免费可用的字体图标，下载代码即可使用。

下载

首先需要注册一个账号，在阿里巴巴矢量图标库，也可以使用微博、GitHub账号登录。

登录成功后，可以在首页搜索你要寻找的字体图标名称，在这里搜索的是“首页”

搜索成功后，把鼠标放在你要使用的图标上

然后将其加入到库

点击购物车，查看添加的图标

然后下载代码

下载成功后是一个压缩包，将其解压

打开其中的demo_index.html文件可以看到字体图标的使用教程。

引用方式	特点	使用步骤
Unicode 引用	兼容性最好，支持 IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。	第一步：拷贝项目下面生成的 `@font-face；` 第二步：定义使用 iconfont 的样式；第三步：挑选相应图标并获取字体编码，应用于页面。
font-class 引用	兼容性良好，支持 IE8+，及所有现代浏览器。相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。	第一步：引入项目下面生成的 fontclass 代码；第二步：挑选相应图标并获取类名，应用于页面。
Symbol 引用	支持多色图标了，不再受单色限制。通过一些技巧，支持像字体那样，通过 `font-size`, `color` 来调整样式。兼容性较差，支持 IE9+，及现代浏览器。浏览器渲染 SVG 的性能一般，还不如 png。	第一步：引入项目下面生成的 symbol 代码；第二步：加入通用 CSS 代码（引入一次就行）；第三步：挑选相应图标并获取类名，应用于页面。

具体使用参考下载下来的demo示例。

使用

Unicode 引用

第一步：间下载下来的所有文件全部复制到所要使用的文件夹下。（demo文件可以不用）

第二步：将图片中要求的代码复制到style标签下，可以引用iconfont.css。

第三步：在HTML中的body标签内要使用到图标的地方引用图标。

效果如下：

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@font-face {
				font-family: 'iconfont';
				src: url('iconfont.eot');
				src: url('iconfont.eot?#iefix') format('embedded-opentype'),
					url('iconfont.woff2') format('woff2'),
					url('iconfont.woff') format('woff'),
					url('iconfont.ttf') format('truetype'),
					url('iconfont.svg#iconfont') format('svg');
			}

			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
		</style>
	</head>
	<body>
		<span class="iconfont">&#xe63b;</span>
	</body>
</html>

也可以使用引用iconfont.css的方式，代码更少更方便。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="iconfont.css" />
	</head>
	<body>
		<span class="iconfont">&#xe63b;</span>
	</body>
</html>

font-class引用

第一步：引入iconfont.css文件。

第二步是选择相应图标的类名应用于页面。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="iconfont.css" />
	</head>
	<body>
		<span class="iconfont icon-shouye"></span>
	</body>
</html>

symbol引用

阿里平台推荐引用。

第一步：引入iconfont.js文件

第二步：加入通用的CSS代码

第三步：选择合适的图标名应用于页面。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 引入iconfont.js -->
		<script src="iconfont.js"></script>
		<!-- 引入CSS代码，引入一次即可 -->
		<style>
			.icon {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<!-- 首页图标 -->
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-shouye"></use>
		</svg>
	</body>
</html>

二木成林

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
在HTML种引用阿里巴巴iconfont字体图标

概述什么是阿里巴巴iconfont字体图标呢？iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制。以前要引用各种图标需要使用的是图标图片，而使用图片需要向服务器请求图片资源，如果有请求次数非常多而用户量又很大那么会很麻烦，造成很多问题，而使用iconfont字体图标，即跟HTML加载一样，减少请求次数，缓解服务器压力。在国...
复制链接

扫一扫