在线引入 iconfont 特殊图标字体

一、前言

本节使用的例子是阿里巴巴图标库的图标

有时候我们想在自己写的网页上在线引入一个或多个图标字体
比如下面这种

上面是一些来自阿里巴巴图标库网站的图标

如果通过下载到本地然后通过本地引入的话，网页中的这些图标在别人查看的时候是无法显示的，因为对于别人来说，引入的路径是相对于我们自己的，别人是无法使用的，当然我们可以把图标放在我们网页的资源中，让别人在访问时就在后台下载下来然后应用到网页中，这样也可以达到查看的效果。

我们在这里不讨论这种方法，我们在这里只使用在线引入，只需要在我们的html网页结构中加入一些简单的配置

二、方法

1、进入 iconfont.cn 搜索自己想找的图标

我们想要一个 “收藏” 图标：

2、将图标在线引入到我们的网页中

我们点击 添加入库

然后点击右上角的这个小购物车

然后就弹出来一个界面，有我们刚才添加的图标，然后在界面中点击 添加至项目

然后我们点击这个 创建一个新项目

然后给项目起个名字点击 保存，保存后来到这个页面

我们使用 Unicode 的方式进行在线引入，所以直接点击 生成代码 ，生成代码如下

然后我们复制下来粘到我们的网页中，注意要放在 <style> 标签内

注意，这一步我们要在链接的最前面额外添加 "http:"

到这里我们的引入过程完毕

3、使用

我们使用伪元素 ::after 来显示我们的图标

首先复制一下图标的代码（类似于它的独有的id，用来标识它）

在这里插入图片描述
我们自定义了一个data-icon属性，然后我们将复制的代码(这里是&#xe600)粘贴到 data-icon 里面

下面是html代码

<body><!-- 我们自定义了一个属性叫做data-icon --><div id="shoucang" data-icon="&#xe600"></div>
</body>

下面是css代码

#shoucang::after 
{/* 下面这个是说我们的字体属于哪种字体，即它的family是谁 */font-family: "iconfont";/* attr()函数代表引用某个值，这里我们引用的就是自定义的data-icon属性 */content: attr(data-icon);/* 还可以通过font-size来调节图标的大小 *//* font-size: 100px;*/
}

然后就完成了，下面是运行截图
在这里插入图片描述

三、如果想引入更多图标的话

需要复制图标的代码，然后跟上面的操作一样，复制Unicode下面的 @font-face 代码，然后通过伪元素的 attr() 函数来引用到该图标的值以使用它

为了使上面的说明更清晰，我再给大家演示一下引入另一个图标 “雪花”，简单的步骤就不再给大家放图了

搜索雪花
添加到我们的一个项目中
然后复制Unicode下的那一串 @font-face 代码(这一串代码用来将字体引入到我们的网页中)，粘到我们的网页结构中

注意，上面这一步我们要在链接的最前面额外添加 "http:"

创建一个盒子，自定义属性 data-icon ，复制该图标的代码放在 data-icon 中

然后我们就在线引入了两个图标！

四、总结

进入 http://iconfont.cn 搜索我们想要的图标
将该图标添加到项目中
复制该图标Unicode选项中的那一串@font-face代码添加在我们的网页结构中（记得粘在 <style> 内），一定要把 http: 给加到链接前面
创建一个盒子，自定义属性 data-icon ，复制该图标的id代码放在 data-icon 中
在 <style> 中对该盒子的伪元素进行设置，首先要写该图标的种类 font-family ，然后写 content: attr(data-icon) ，这两个是必写的，如果还想调整图标的其他属性你还可以模仿着字体的属性，比如我们想要调整图标的大小，那么我们就可以再加一个 font-size 就可以了！

本文所用到的例子的代码如下

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>关于iconfont图标的在线引入</title><style>/* 这是收藏图标的引入 */@font-face {font-family: 'iconfont';/* project id 3157729 */src: url('');src: url('?#iefix') format('embedded-opentype'),url('http://at.alicdn.com/t/font_3157729_bc27lb64ujg.woff2') format('woff2'),url('http://at.alicdn.com/t/font_3157729_bc27lb64ujg.woff') format('woff'),url('http://at.alicdn.com/t/font_3157729_bc27lb64ujg.ttf') format('truetype'),url('#iconfont') format('svg');}/* 这是雪花图标的引入 */@font-face {font-family: 'iconfont';/* Project id 3157729 */src: url('http://at.alicdn.com/t/font_3157729_f3xi6mthm9.woff2?t=1642863665994') format('woff2'),url('http://at.alicdn.com/t/font_3157729_f3xi6mthm9.woff?t=1642863665994') format('woff'),url('http://at.alicdn.com/t/font_3157729_f3xi6mthm9.ttf?t=1642863665994') format('truetype');}#shoucang::after {font-family: "iconfont";content: attr(data-icon);}#xuehua::after {font-family: "iconfont";content: attr(data-icon);}</style></head><body><div id="shoucang" data-icon="&#xe600"></div><div id="xuehua" data-icon="&#xe612"></div></body></html>