在线引入 iconfont 特殊图标字体

深拥浅沫

已于 2022-01-23 17:17:20 修改

阅读量3.6k

点赞数 5

分类专栏：前端文章标签：前端 css3 css 图标设计

于 2022-01-22 23:22:17 首次发布

本文链接：https://blog.csdn.net/qq_52000150/article/details/122644575

版权

前端专栏收录该内容

2 篇文章

订阅专栏

一、前言

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

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

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

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

我们在这里不讨论这种方法，我们在这里只使用在线引入，只需要在我们的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>