在前端开发中，字体图标被广泛地运用在网页设计之中，提供了丰富的符号及图标选择，能给网站一个简洁的外观并且增加用户体验。而 LESS 又是一个非常流行的 CSS 预处理器，其在开发中可以大幅度提高开发效率，减少代码体积，提高代码维护性。那么在 LESS 中如何使用字体图标呢？下面将详细介绍一下。
使用步骤
下载字体图标
首先，我们需要先下载字体图标文件，一般包括 .ttf、.woff、.eot 和 .svg 四个文件，这里以 Font Awesome 字体图标为例，我们可以在网站上获得下载地址。
构建 LESS mixin 类
定义 LESS 的 mixin 类，用于给元素设置图标，同时通过 content 属性导入字体文件中的图标，如下所示：
-- -------------------- ---- -------
-- -- ----- -
------------------------- ----------- -------------- -
------------ -------------
---------- -----------
----------- -------
----------------------- ------------
------------------------ ----------
-------- -
-------- --------------
-
-
-- ------
---------- -
------------ ----- ------- - ------
------------ -------
----------- -------
---- -------------------------------------------------
---- ------------------------------------------------------- ----------------------------
-------------------------------------------------- ----------------
------------------------------------------------- ---------------
------------------------------------------------ -------------------
------------------------------------------------------------------- --------------
-其中，@font-family 是指我们定义的字体族名称，@font-size 是字体大小，@icon-content 是定义元素图标所使用的 Unicode 代码。通过设置元素的 :before 伪元素，我们可以在外部定义元素图标，在调用时并不需要手动写入 Unicode，可以使用我们定义的 mixin 类。
使用 LESS mixin 类
定义了 mixin 类之后，我们就可以在需要使用图标的元素中使用 icon-class 设定定义的 mixin 类，并根据需要传入参数来指定其图标大小、颜色等样式。示例如下：
-- -------------------- ---- -------
-- -- ----- -
----- -
----------------- -
----------------- ------- - ------ ----- ---------
-
---------------- -
----------------- ------- - ------ ----- ---------
-
--------------- -
----------------- ------- - ------ ----- ---------
-
-这里 icon 类是我们定义的样式类，其通过 .facebook、.twitter、.wechat 等类名调用 mixin 类，并设置图标字体及大小。
总结
LESS 的 mixin 类能够方便地将字体图标应用到元素中，整合代码与样式，提高了代码的可维护性。使用 LESS 编写字体图标也是提高开发效率和代码可读性的一种方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d20abfb5eee0b52596aa9b