字体图标的使用越来越普遍，因为它们比图像图标更灵活且易于使用。通过使用 LESS ，您可以更轻松地创建自己的字体图标集。
第一步：导入字体文件
首先，您需要找到一个开源字体图标库。FontAwesome 和 Material Icons 等是流行的选择。您可以下载并导入这些字体文件，然后将它们放在您的项目中。
-- -------------------- ---- -------
---------- -
------------ --------------
---- ---------------------------------------
---- --------------------------------------------- ----------------------------
---------------------------------------- ----------------
--------------------------------------- ---------------
-------------------------------------- -------------------
--------------------------------------------------------- --------------
------------ -------
----------- -------
-上面的代码显示了如何导入 FontAwesome 字体。您应该将它保存在一个名为 fonts 的文件夹中，并在 less 文件中正确地引用。
第二步：定义变量
接下来，您需要定义变量来存储您的图标。在这个例子里，我们将使用 LESS 的 Map 功能。
@icons: {
"search": "\f002",
"home": "\f015",
"star": "\f005"
};这里，我们定义了一个名为 @icons 的 Map ，其中包含键值对，其中键是您的图标名称，值是 Unicode 编码。
第三步：编写 Mixins
现在，您需要编写一个名为 .icon() 的 mixin 来创建您的图标：
.icon(@name) {
&:before {
font-family: 'FontAwesome';
content: @icons[@name];
}
}上述代码创建了一个伪元素并将其内容添置为您的 Unicode 编码，从而将其添加到您的 HTML 中。
第四步：使用字体图标
最后，您可以将 MIXIN 应用于您的 HTML 元素：
-- -------------------- ---- ------- ------------ - -------------- - ---------- - ------------ - ---------- - ------------ -
现在，每个类都将显示不同的字体图标。这使得您可以更轻松地更改您的 HTML 元素，并且您可以随时添加和修改图标。
总结
使用 LESS 编写字体图标可以使您的开发过程更加简便和可维护。通过把图标和 Unicode 编码存储在变量中，您可以更轻松地使用它们，并随时添加和修改图标。
示例代码：
-- -------------------- ---- -------
---------- -
------------ --------------
---- ---------------------------------------
---- --------------------------------------------- ----------------------------
---------------------------------------- ----------------
--------------------------------------- ---------------
-------------------------------------- -------------------
--------------------------------------------------------- --------------
------------ -------
----------- -------
-
------- -
--------- --------
------- --------
------- -------
--
------------ -
-------- -
------------ --------------
-------- --------------
-
-
------------ -
--------------
-
---------- -
------------
-
---------- -
------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df39a6f6b2d6eab3a6b557