html
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=node_modules/@mdi/font/CSS/materialdesignicons.min.CSS">

2. 使用 Webfont 引用

在 CSS 文件中引用 Google Material Design Icons 的字体文件。可以在 node_modules/@mdi/font/fonts 目录下找到这些字体文件。通过以下代码引入：

CSS
@font-face {
  font-family: 'Material Design Icons';
  src: url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot');
  src: url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?#iefix') format('embedded-opentype'),
       url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2') format('woff2'),
       url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff') format('woff'),
       url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf') format('truetype');
}

步骤三：使用 Google Material Design Icons

现在，我们可以在项目中使用 Google Material Design Icons 了。它们可以作为 CSS 类名直接应用于 HTML 元素。例如，要在一个按钮上显示一个图标，可以使用以下代码：

html
<button><i class="mdi mdi-heart"></i> 点赞</button>

这将在按钮上显示一个心形图标。

案例代码：

下面是一个完整的示例代码，演示如何在项目中使用 Google Material Design Icons。

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=node_modules/@mdi/font/CSS/materialdesignicons.min.CSS">
  <style>
    @font-face {
      font-family: 'Material Design Icons';
      src: url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot');
      src: url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?#iefix') format('embedded-opentype'),
           url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2') format('woff2'),
           url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff') format('woff'),
           url('node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf') format('truetype');
    }
  </style>
</head>
<body>
  <button><i class="mdi mdi-heart"></i> 点赞</button>
</body>
</html>

在上面的代码中，我们通过在部分引入 CSS 和字体文件来引用 Google Material Design Icons。然后，在一个按钮上使用了一个心形图标。

：

通过以上步骤，我们可以简单地在项目中使用 Google Material Design Icons。这些图标可以通过 CSS 类名直接应用于 HTML 元素，为网页或移动应用增添视觉效果。希望本文对您有所帮助！

举报有用（4）分享收藏

npm 安装后如何引用 Google Material-Design-Icons

1个回答

kokekoke

热门话题

相关问题