Iconfont 在HTML中的使用

article/2025/6/28 11:39:42

一、准备阶段：

　　a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标，加入购物车

　　b.点击网页中的购物车下载代码

二、3种方法实现 Iconfont 的HTML显示

Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

使用步骤如下：
第一步：在CSS代码块或CSS文件中使用 @font-face 声明字体

@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 的样式

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#xe612;</span>

完整代码：

<!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">&#xe612;</span></body></html>

注意：CSS代码块中的 @font-face 内的 src: url('iconfont.eot'); 中的 url 即为之前准备阶段下载的源码文件夹下的对应文件，此处的完整代码的文件路径与 iconfont.eot 在同一目录下，若相应文件不在同一目录下请修改url参数。
实现效果：

2.font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：
1. 兼容性良好，支持 IE8+，及所有现代浏览器。
2. 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
3. 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
4. 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
  使用步骤如下：
  第一步：引入项目下面生成的 fontclass 代码（即为准备阶段下载的代码文件中的iconfont.css文件）重要！！！：
```
<link rel="stylesheet" href="./iconfont.css">
```
  第二步：挑选相应图标并获取类名，应用于页面：
```
<span class="iconfont icon-setup"></span>
```

　　　3.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-setup"></use>
</svg>

三、效果展示

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title></title><link rel="stylesheet" href="css/bootstrap.css" /><link rel="stylesheet" href="css/iconfont-style.css" /></head><body>       <a class="btn btn-lg btn-primary"><i class="icon icon-info"></i>&nbsp;More About</a></body>
</html>

iconfont-style.css

@font-face {font-family: 'iconfont';src:url('../fonts/iconfont.eot?-8vg322');src:url('../fonts/iconfont.eot?#iefix-8vg322') format('embedded-opentype'),url('../fonts/iconfont.woff?-8vg322') format('woff'),url('../fonts/iconfont.ttf?-8vg322') format('truetype'),url('../fonts/iconfont.svg?-8vg322#iconfont') format('svg');font-weight: normal;font-style: normal;
}[class^="icon-"], [class*=" icon-"] {font-family: 'iconfont';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-user-female:before {content: "\e106";
}
.icon-user-follow:before {content: "\e064";
}
.icon-user-following:before {content: "\e065";
}
更多定义的icon此处省略........