随着 Web 技术的不断发展，图标已经成为了页面设计不可或缺的组成部分。而使用字体图标可以有效地减少 HTTP 请求，提高页面性能。而本文将会介绍如何使用 gulp-iconfont-css 这一 npm 包来生成 iconfont，并使用该 iconfont。
安装 gulp-iconfont-css
使用 npm 安装 gulp-iconfont-css，可在项目根目录下使用以下命令进行安装：
npm install gulp-iconfont-css --save-dev
生成 iconfont
使用 gulp 安装后，我们可以在 gulpfile.js 中书写如下代码来生成 iconfont：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - -----------------------------
----- -------- - -------------------------
----- -------- - -----------
--------------------- -------- -- -
------ -----------------------
-------------------
---------
----- -----------------------------
----------- -------------------------------
--------- --------------
---
----------------
---------
-------- ------- ------ ------ ------- ---------
---------- -----
----------- -----
---
---------------------------
---使用 iconfont
在生成 iconfont 后，我们可以在页面中使用该 font，这里是一个示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------------- -------------- ------ ---------------------------- ----------------- ------- ------ --- --------------- -------------- ------- -------
而在样式表文件中，我们可以这样使用：
$icons-font-path: "../../fonts/";
@import "icons";
.icon-add:before {
content: icon("add");
}当内容执行完这些步骤后，就可以愉快地使用 iconfont 了。
结束语
在本篇文章中，我们介绍了如何使用 gulp-iconfont-css 这个 npm 包来生成 iconfont，以及如何在页面中使用该 font。使用 iconfont 可以有效地提高页面性能，同时也可以使页面更加美观。我们希望本文对学习 iconfont 有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc83b5cbfe1ea06127e8