在线引入 iconfont 特殊图标字体

深拥浅沫

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

阅读量3.1k

点赞数 4

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

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

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

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、前言

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

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

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

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

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

关于在线引用图标的方法还有好几种，以上是我看各博客以及百度总结的其中一种，本文仅仅给大家提供一个简单明了的参考让大家更容易操作，各位有好的办法可以留言告诉我一起学习！

深拥浅沫

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
6
评论
在线引入 iconfont 特殊图标字体

一、前言本节使用的例子是阿里巴巴图标库的图标有时候我们想在自己写的网页上在线引入一个或多个图标字体比如下面这种上面是一些来自阿里巴巴图标库网站的图标如果通过下载到本地然后通过本地引入的话，网页中的这些图标在别人查看的时候是无法显示的，因为对于别人来说，引入的路径是相对于我们自己的，别人是无法使用的，当然我们可以把图标放在我们网页的资源中，让别人在访问时就在后台下载下来然后应用到网页中，这样也可以达到查看的效果。我们在这里不讨论这种方法，我们在这里只使用在线引入，只需要在我
复制链接

扫一扫

专栏目录