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

概述

什么是阿里巴巴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-sizecolor 来调整样式。

  • 兼容性较差,支持 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
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值