在前端开发中，使用字体图标已经成为了一种非常流行的方式。相比于传统的图片图标，使用字体图标有很多优点，比如可以实现无限缩放、可以通过 CSS 控制样式等。而在 LESS 中使用字体图标，则更加方便快捷，本文将介绍如何将 SVG 图标编译到 CSS 中，以便在 LESS 中使用。
什么是字体图标？
字体图标是指将一些图标制作成字体文件，通过 CSS 控制字体的方式来展现图标。字体图标可以根据字体的大小无限缩放，而且可以通过 CSS 控制颜色、大小、阴影等样式，非常灵活。
为什么要使用字体图标？
使用字体图标有很多好处：
- 可以减少 HTTP 请求，提高网页加载速度。
- 可以实现无限缩放，适应不同的屏幕大小。
- 可以通过 CSS 控制样式，非常灵活。
如何在 LESS 中使用字体图标？
在 LESS 中使用字体图标，需要先将 SVG 图标编译到 CSS 中。这里介绍两种将 SVG 图标编译到 CSS 中的方法。
1. 使用 fontello
fontello 是一个在线的字体图标制作工具，可以将 SVG 图标转换成字体文件，并生成相应的 CSS 文件。使用 fontello 的方法如下：
- 打开 fontello.com，点击 "New Project" 创建一个新项目。
- 点击 "Import" 按钮，将需要的 SVG 图标上传到网站上。
- 选择需要的图标，并将它们添加到项目中。
- 点击 "Download" 按钮，下载生成的字体文件和 CSS 文件。
- 在 LESS 中引入 CSS 文件，即可在 LESS 中使用字体图标。
2. 使用 gulp-iconfont
gulp-iconfont 是一个 Gulp 插件，可以将 SVG 图标转换成字体文件，并生成相应的 CSS 文件。使用 gulp-iconfont 的方法如下：
安装 gulp-iconfont：
npm install gulp-iconfont --save-dev
创建一个 Gulp 任务，使用 gulp-iconfont 将 SVG 图标转换成字体文件，并生成相应的 CSS 文件：
-- -------------------- ---- ------- --- ---- - ---------------- --- -------- - ------------------------- --- ----------- - ----------------------------- --------------------- ----------- ------ ------------------------- ------------------- --------- --------- ----- ----------------------------- ----------- --------------------- --------- ----------- --- ---------------- --------- --------- -------- ------- ------ ------- --------- ---------- ---------------------------- ---------- ----- ----------- ---- --- --------------------------- ---上面的代码将
icons目录下的所有 SVG 图标转换成字体文件，并生成相应的 CSS 文件。其中path是 CSS 模板文件的路径，targetPath是生成的 CSS 文件的路径，fontPath是字体文件的路径。在 LESS 中引入 CSS 文件，即可在 LESS 中使用字体图标。
如何在 LESS 中使用字体图标？
在 LESS 中使用字体图标，只需要在 CSS 中设置相应的字体，然后使用 content 属性来显示图标即可。示例代码如下：
-- -------------------- ---- -------
---------- -
------------ ---------
---- ---------------------------
---- --------------------------------- ----------------------------
---------------------------- ----------------
--------------------------- ---------------
-------------------------- -------------------
------------ -------
----------- -------
-
----- -
------------ ---------
---------- -----
------ -----
-------- -
-------- --------
-
-上面的代码定义了一个名为 myfont 的字体，并将其应用于 .icon 类。.icon:before 中的 content 属性设置为 \e600，即显示字体中的第一个图标。
结论
在 LESS 中使用字体图标，可以通过将 SVG 图标编译到 CSS 中来实现。使用字体图标可以减少 HTTP 请求，提高网页加载速度，而且可以实现无限缩放，适应不同的屏幕大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6767c6a098e3e1ab1a7ada6f