使用 Icon Font ( 图示文字 )
Icon Font 是一种使用字体方式呈现向量图示的网页技术，使用 Icon Font 可以大幅减少网页对于图片加载的依赖，并可灵活的缩放各种图示，这篇教学会介绍如何在 HTML 和 CSS 中使用 Icon Font，以及几个非常好用的 Icon Font 网站。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
认识 Icon Font
Icon Font 又称作图示字体或符号字体，Icon Font 所使用的图示或符号，除了基本的字母和数字，更包含多种形状、箭头、动作或概念图示。Icon Font 是常见的网页设计技术，主要有下列的优点：
- 向量图形特性：Icon Font 是向量图形，可以任意放大或缩小而不影响质量，适合各种不同的屏幕分辨率。
- 文件较小：和其他图示图片相比，Icon Font 的文件较小，可以减少页面加载时间。
- 容易使用：只需要加入对应名称的 CSS 类别就能使用。它为您提供灵活性和自订选项。
- 一致设计风格：同样类型的 Icon Font 具有相同的设计风格，可让网页设计更一致。
Icon Font 和 SVG Icon 的比较
在网页中使用向量图示，Icon Font 或 SVG 图示是两种极为常见的做法，下方列出这两种做法的差异，可按照各自的需求选用不同的做法。
| 特点 | Icon Font | SVG Icon |
|---|---|---|
| 格式 | 向量格式 | 向量、点阵格式都可以 |
| 浏览器支援度 | 都支援 | 都支援 |
| 文件大小 | 较小，加载一次即可。 | 可能比 Icon Font 大，且需要分开加载或内嵌在网页中。 |
| 无障碍设施 | 只能辨认对应 unicode | 可明确辨识为图示与描述。 |
| 用户互动 | 基本文字类型互动 | 高互动性，可加入动画或其他互动效果。 |
| 扩充与修改 | 字体产生后只能修改颜色或尺寸，修改需要重新产生字体。 | 可以使用程序扩充或调整。 |
开始使用 Icon Font
要使用 Icon Font，必须要先透过一些工具建立字体文件，可使用下方常用的线上工具建立自己的 Icon Font ( 都不用注册就能使用，文章下方有相关教学 )：
- IcoMoon APP：https://icomoon.io/app/
- Fontello：https://fontello.com/
不论是使用那种 Icon Font 产生工具产生的 Icon Font，使用的方式都相同，步骤如下：
- 1、首加载自己的 Icon 字体
- 2、在 HTML 中使用
span加入图示。- 3、替
span加入指定的 class 名称，就会出现对应的 Icon Font。- 4、出现 Icon Font 之后，修改尺寸与颜色。
下方是在 HTML 使用 Icon Font 的基本结构。
<!-- HTML 程式碼 -->
<head>
<!-- 其他 meta 內容 -->
<link rel="stylesheet" href="Icon Font 檔案">
</head>
<body>
<div>
<span class="icon-name"></span> <!-- Icon Font 擺放位置 -->
<span class="mls">前方是 ICON</span>
</div>
</body>
Icon Font 工具：IcoMoon
IcoMoon 是一个强大的 Icon Font 线上产生工具，IcoMoon 除了一些特殊图示包需要付费，大多数的图示包都是免费且不需注册就能使用，免费功能也包含用户上传自己的 SVG 产生 Icon Font，是个使用 Icon Font 时的必备工具。
前往 IcoMoon APP：https://icomoon.io/app/
打开网页后，点击上方书本“library”图示打开图示包清单，点击“+Add”按钮就能将该图示包加入工具画面，点击“-Remove”就能移除该图示包。
回到 IcoMoon APP 画面，选择要产生 Icon Font 的图示，也可点击右上方图示选择“Select All”全选图示，完成后点击右下方“Generate Font”按钮开始产生 Icon Font。
下载 Icon Font 之前，可以在画面中设定该图示的名称与 unicode 编码 ( 建议 unicode 按照默认编码 )，完成后点击右下角“Download”按钮就能下载一个 Icon Font 的 zip 压缩档。
将压缩档解压缩后，demo-files 文件夹里为预览的文件，fonts 文件夹里为产生的图示字体档，style.css 是设定字体的 CSS 文件。
打开 style.css 文件，@font-face 表示这个 Icon Font 的设定，设定后就能在 font-family 中使用 icomoon 的字体名称，[class^="icon-"],[class*=" icon-"] 表示特定名称选择器的样式，最下方的类别名称会根据 unicode 产生对应的图示。
参考 demo.html 的内容，将 HTML 改成下方的程序码，打开网页后就能看见 Icon Font 出现在网页中。
<html>
<head>
<meta charset="utf-8">
<title>OXXO Icon Font 測試</title>
<link rel="stylesheet" href="style.css"></head>
<style>
body {font-size: 40px;}
</style>
<body>
<div>
<span class="icon-home"></span> icon-home<br>
<span class="icon-home3"></span> icon-home3<br>
<span class="icon-camera"></span> icon-camera<br>
<span class="icon-headphones"></span> icon-headphones<br>
<span class="icon-music"></span> icon-music<br>
<span class="icon-play"></span> icon-play
</div>
</body>
</html>
Icon Font 工具：Fontello
Fontello 是一个好用的 Icon Font 线上产生工具，不但免费且不需注册就能使用，也可以让用户上传自己的 SVG 产生 Icon Font，是个使用 Icon Font 时的必备工具。
前往 Fontello：https://fontello.com/
选取要产生 Icon Font 的图示，前往“Customize Names”页签可修改图示名称。
切换到“Customize Codes”页签可修改图示的 unicode，建议使用默认值。
全部动作完成后，点击右上角“Download webfont”按钮将 Icon Font 下载为 zip 文件。解压缩之后 demo.html 是预览的页面，css 文件夹设定字体的 CSS 文件，font 文件夹里为产生的图示字体档。
打开 fontello.css 文件，@font-face 表示这个 Icon Font 的设定，设定后就能在 font-family 中使用 fontello 的字体名称，[class^="icon-"]:before,[class*=" icon-"]:before 表示特定名称选择器的样式，最下方的类别名称会根据 unicode 产生对应的图示 ( 其他 css 文件只是一些额外设定或独立设定，所以查看这份文件即可 )。
参考 demo.html 的内容，将 HTML 改成下方的程序码，打开网页后就能看见 Icon Font 出现在网页中。
<html>
<head>
<meta charset="utf-8">
<title>OXXO Icon Font 測試</title>
<link rel="stylesheet" href="css/fontello.css"></head>
<style>
body {font-size: 40px;}
</style>
<body>
<div>
<span class="icon-eye"></span> icon-eye<br>
<span class="icon-videocam"></span> icon-videocam<br>
<span class="icon-camera"></span> icon-camera<br>
<span class="icon-emo-thumbsup"></span> icon-emo-thumbsup<br>
<span class="icon-emo-devil"></span> icon-emo-devil<br>
<span class="icon-emo-beer"></span> icon-emo-beer
</div>
</body>
</html>
使用特殊符号或文字取代 Icon Font
虽然操作 Icon Font 的步骤很简单，但对于一些特殊符号而言，有时使用“现成的”特殊符号会更方便，在 unicode 的定义中，已经包含许多“特殊符号”，基本上只要直接“复制贴上”，或透过一些操作系统提供的输入法就能产生这些特殊符号，下方提供“特殊符号大全”网站，只要点击想要的特殊符号，就能复制并使用该符号。
前往：特殊符号大全
透过“特殊符号”替代 Icon Font 时需要注意，特殊符号在不同操作系统、不同的社群平台或不同浏览器中的表现可能有所不同，下方范例会使用四种不同浏览器呈现特殊符号的效果。
小结
Icon Font 图示字体是网页设计必备的技巧，如果能够更理解 @font-face 与 CSS 虚拟元素选择器，就更能掌握 Icon Font 的精髓，赶快把网页中的图示图片换成 Icon Font 吧。
微信扫码关注
抖音扫码关注