2023.10.24
字体图标
本文演示了使用阿里图标库在网页中设置字体图标,阅读时间大约三分钟
当需要在网页中呈现一个高保真图像时,采用传统图像容易失真,可以采用字体图标,相比图片更加清晰,灵活性高,更方便改变大小,颜色和风格,兼容性好,IE也能支持。字体图标是一种小图标,通常用于标识文本内容,他们通常是由一个小圆圈,一条直线或波浪线组成,并以不同的颜色,形状和大小表示不同的文本内容。例如微信的聊天导航栏。本文将使用阿里图标库演示如何在网页中设置字体图标
本地引用(有三中引用方式)
将所选的素材下在在本地
将文件解压后得到如下文件,将文件拖入vscode
Unicode引用
Unicode 是字体在网页端最原始的应用方式,特点是:
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 默认情况下不支持多色,直接添加多色图标会自动去色。
注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
Unicode 使用步骤如下:
第一步:拷贝项目下面生成的 @font-face
<style>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1698122191956') format('woff2'),
url('iconfont.woff?t=1698122191956') format('woff'),
url('iconfont.ttf?t=1698122191956')format('truetype');
}/*需要将url中的地址换成vscode中的地址*/
</style>
第二步:定义使用 iconfont 的样式
<style>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">3</span>
“iconfont” 是你项目下的 font-family。可以通过编辑项目查看,默认是 “iconfont”。
Font class引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
- 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 “iconfont”。
Symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 IE9+,及现代浏览器。
- 浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
<!--href中放实际的图标编号-->
在线引用(有三种方式)
生成在线链接,然后引用,具体样式和本地引用一样,这里只介绍如何引用在线链接
Unicode在线链接
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体图标在线引用方式一</title>
<style>
@font-face {
font-family: 'iconfont'; /* Project id 4299745 */
src: url('//at.alicdn.com/t/c/font_4299745_c8u6kpznx4.woff2?t=1698124120046') format('woff2'),
url('//at.alicdn.com/t/c/font_4299745_c8u6kpznx4.woff?t=1698124120046') format('woff'),
url('//at.alicdn.com/t/c/font_4299745_c8u6kpznx4.ttf?t=1698124120046') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 100px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
</body>
</html>
Font class在线链接
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4299745_c8u6kpznx4.css">
Symbol在线链接
<script src="//at.alicdn.com/t/c/font_4299745_c8u6kpznx4.js"></script>
本地引用和在线引用效果一样,Unicode和Font class效果一样没有色彩,Sycmbol提供了色彩
Unicode和Font class效果如下
Sycmbol效果如下
以上为使用阿里图标库在网页中设置字体图标,希望我的文章可以帮助到你,感谢阅读