font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
下载使用步骤如下:
-
打开阿里巴巴矢量图标库
-
找到自己想要使用的样式(如图)
- -
点击存入购物车(大多数图标都为免费,但这一操作需要登陆)
-
图标选择完成后,在自己的购物车中找到然后点击下方下载代码(如果没有的话试着调整浏览器显示尺寸到90%或者更低)
-
下载完成之后是一个压缩包,设计人员直接把压缩包直接交给代码人员即可。
-
代码人员将文件夹解压缩之后,新建一个iconfont文件夹(该文件夹与images、css等文件夹同级)并将如下图所示文件复制到iconfont文件夹中。
-
在html5中以引入的方式引入iconfont.css
-
在网页中以span或者i标签的方式引入,引入完成后需要赋予两个类名,格式为“iconfont+空格+图片类名”,图片类名在如图网页中:
复制完成时代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>测试</title>
<meta charset="utf-8">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<span class="iconfont icon-gouwuche"></span>
</body>
</html>
效果如图:
注:写字体图标样式时,要给图片类名写样式,不能给iconfont写。