问题描述
写在前面:如果此篇博客中有任何错误的地方,欢迎大家的指正!让我们共同进步!
如果觉得这篇博客有用就点赞+收藏+关注三连吧!
由于问题描述篇幅较多,想要直接得到操作方法的同学可以直接跳到下面的标题——“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 中,找到想要添加的字体图标,这里我们以下拉图标举例。
复制形如  的字符串,在html文件中直接粘贴使用即可。
④而在伪元素选择器上使用,按照以上的操作要做如下操作修改,
要把font_family引入,并将 “” 前面的 &#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 将 “” 前面的 &#x 改为“\”*/
font-family: 'iconfont';
content: '\e665';
}
</style>
</head>
<body>
<div></div>
<span class="iconfont"></span>
</body>
</html>
运行结果如下: