Iconfont使用方法的详细教程，html怎样引入iconfont（对应https://www.iconfont.cn/日期2020.9月）

最新推荐文章于 2024-07-09 12:16:47 发布

Kevin11Yao

最新推荐文章于 2024-07-09 12:16:47 发布

阅读量2.5k

点赞数 2

分类专栏：前端HTML+CSS 文章标签： css3 css html5 html

本文链接：https://blog.csdn.net/weixin_45664402/article/details/108563586

版权

前端HTML+CSS 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

问题描述

写在前面：如果此篇博客中有任何错误的地方，欢迎大家的指正！让我们共同进步！
如果觉得这篇博客有用就点赞+收藏+关注三连吧！

由于问题描述篇幅较多，想要直接得到操作方法的同学可以直接跳到下面的标题——“2020-09版本操作”。

在练习引入字体图标的过程中，由于 iconmoon字库是外网，因此访问速度较慢。

我就用国内的iconfont阿里巴巴图库就进行练习，但是在引入过程中并不顺利，在网上查阅有关的操作方法由于版本过老，实际操作有了部分改变，因此在这里自己总结出来了一套操作，希望能帮助各位初学者学习字体图标的引入过程。

根据打开demo_index.html后的官方操作方法，我的图标并没有很好地显示（可能是由于本人太菜，有哪里的操作不对，欢迎指出）。

方法①（不提倡）最简单粗暴的方法是直接把下载的“font_”开头的文件再次解压，将其内部内容和html文件同一路径，如下图所示：

在这里插入图片描述
这样虽然可以使字体图标可以使用，但是其结构性却变差了。因此我想提高其结构性，重新修改了一下。

2020-09版本操作如下

1.首先是在官网进行图标下载，阿里巴巴图库
（若对图标代码下载有什么疑惑，可以看这个博客字体图标下载教程）

2.下载了之后你会有一个download.zip的文件，将他解压到和你待引入的.html同一目录中，如下图所示（一般的话文件名后面还有其他的乱码，最好将其名字改为fonts，以便于一会儿路径的操作）
在这里插入图片描述

3.打开fonts文件中的demo_index.html后，执行其官方指导中的第一步和第二部操作。

4.如果观察细致，可以发现，这个文件的默认路径其实是，
默认把 使用者的html文件 和 解压后的文件 放在同一位置才能起作用。
因此做以下的修改：
在这里插入图片描述
（注意，此操作前要先把刚刚解压的文件名格式化一下，这里我使用的fonts）

5.接下来就是对于图标的引用，
①打开刚刚的demo_index.html
②执行其第三步
在这里插入图片描述
③在 demo_index.html 中，找到想要添加的字体图标，这里我们以下拉图标举例。

复制形如 &#xe123 的字符串，在html文件中直接粘贴使用即可。

④而在伪元素选择器上使用，按照以上的操作要做如下操作修改，
在这里插入图片描述
要把font_family引入，并将 “&#xe123” 前面的 &#x 改为“\”，方可正常使用。

举例代码如下：


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'iconfont';
            /* 重点修改1——路径 */
            src: url('fonts/iconfont.eot');
            src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
                url('fonts/iconfont.woff2') format('woff2'),
                url('fonts/iconfont.woff') format('woff'),
                url('fonts/iconfont.ttf') format('truetype'),
                url('fonts/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;
        }

        div {
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }

        div::after {
            /* 重点修改2 将 “&#xe123” 前面的 &#x 改为“\”*/
            font-family: 'iconfont';
            content: '\e665';
        }
    </style>
</head>

<body>
    <div></div>
    <span class="iconfont">&#xe665;</span>
</body>

</html>

运行结果如下：
在这里插入图片描述

Kevin11Yao

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Iconfont使用方法的详细教程，html怎样引入iconfont（对应https://www.iconfont.cn/日期2020.9月）

问题描述由于问题描述篇幅较多，想要直接得到操作方法的同学可以直接跳到下面的标题——“2020-09版本操作”。在练习引入字体图标的过程中，由于 iconmoon字库是外网，因此访问速度较慢。我就用国内的iconfont阿里巴巴图库就进行练习，但是在引入过程中并不顺利，在网上查阅有关的操作方法由于版本过老，实际操作有了部分改变，因此在这里自己总结出来了一套操作，希望能帮助各位初学者学习字体图标的引入过程。根据打开demo_index.html后的官方操作方法，我的图标并没有很好地显示（可能是由于本人太
复制链接

扫一扫