文章目录

前言一、iconfont是什么？二、使用步骤1.下载字体图标2.引入字体图标

三、实现效果总结

前言

字体图标常应用于网页中常见的小图标。

提示：以下是本篇文章正文内容，下面案例可供参考

一、iconfont是什么？

iconfont就是字体图标，是一种字体，可以使用CSS编辑样式。

二、使用步骤

1.下载字体图标

可以进入icomoon官网https://icomoon.io/ 或国内的平台https://www.iconfont.cn/ 点击菜单栏中的IcoMoon App进入字体图标库 选择需要的图标 点击右下角下载到本地

2.引入字体图标

fonts文件复制到自己的项目中 将style.css文件中@font-face中的内容复制到项目的CSS文件中

/* 字体声明 */

@font-face {

font-family: 'icomoon';

src: url('fonts/icomoon.eot?67d3zl');

src: url('fonts/icomoon.eot?67d3zl#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf?67d3zl') format('truetype'),

url('fonts/icomoon.woff?67d3zl') format('woff'),

url('fonts/icomoon.svg?67d3zl#icomoon') format('svg');

font-weight: normal;

font-style: normal;

font-display: block;

}

.position {

font-family: 'icomoon';

}

将下图中的符号复制到项目的HTML标签中

Document

重庆

三、实现效果

总结

本文仅仅简单介绍了iconfont的使用，而iconfont把大量的图标变成了字体文件，减少了请求数，提高了加载速度。