Material Design Iconic Font 是一种基于 Google Material Design 的矢量图标字体，其包含了数百个图标可用于 Web 应用程序的设计与开发。通过使用 npm 包管理器，我们可以轻松地将该图标字体集成到前端项目中。
安装
要在项目中使用 Material Design Iconic Font，首先需要在命令行窗口中执行以下命令来安装该 npm 包：
npm install material-design-iconic-font --save
这条命令将从 npm 仓库下载并安装最新版本的 Material Design Iconic Font，并将其添加到项目的依赖项中。
引入样式文件
完成安装后，我们需要在 HTML 文件中引入 Material Design Iconic Font 的样式表。我们可以通过在 <head> 标签下添加以下代码实现：
<link rel="stylesheet" href="node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
当然，如果你的构建工具支持打包 npm 模块，也可以在 CSS 中直接 @import 导入样式文件。
使用图标
一旦样式文件被引入，我们就可以在任何元素上使用 Material Design Iconic Font 的图标了。在 HTML 中，我们可以使用以下标记来使用图标：
<i class="zmdi zmdi-home"></i>
其中 zmdi 是 Material Design Iconic Font 的 CSS 类，而 zmdi-home 是具体的图标类。这里使用的是 zmdi-home，它代表了一个小房子。
在 CSS 中，我们也可以通过以下方式使用 Material Design Iconic Font 的图标：
.my-icon:before {
content: "\f2c0";
font-family: "Material-Design-Iconic-Font";
font-size: 24px;
}这里，我们将 content 设置为要显示的 Unicode 字符编码，并指定了字体和字体大小。
示例代码
下面的示例演示了如何使用 Material Design Iconic Font 来添加图标到按钮中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------ ------ ---- ------------
----- ---------------- ---------------------------------------------------------------------------------------------
------ ----------------
---- -
-------- -------------
-------- --- -----
---------- -----
------------ -----
------ -----
----------------- --------
-------------- ----
---------------- -----
----------- ---------------- ---- -----
------------------- ---------------- ---- -----
---------------- ---------------- ---- -----
--------------- ---------------- ---- -----
-
---------- -
----------------- --------
-
---- - -
------------- ----
-
--------
-------
------
------- -------------- ----------- --------------------------------
------- -------------- ----------- ---------------------------
------- -------------- ----------- ----------------------------
-------
-------在这个例子中，我们创建了一个带有图标的按钮组，使用 Material Design Iconic Font 的三个图标：搜索、添加和编辑。当鼠标悬停在按钮上时，按钮的背景色会发生变化。
总结
使用 Material Design Iconic Font 可以轻松地将现代矢量图标集成到 Web 应用程序中。通过 npm 包管理器，我们可以更方便地集成它到前端项目中。在本文中，我们讨论了如何安装、引入样式文件和使用图标。最后，我们还提供了一个示例演
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35208