0

我一定错过了一些关于如何自定义样式 Material Design Icons 的内容，而不是在 html 页面中，而是在单独的 CSS 文件中。

这是我的 html 文档的示例，直到 head 标签。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- Google Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
      /* Begin Custom Material Icons ------------------------------------------ */
      .material-icons.md-12 { font-size: 12px; }
      .material-icons.md-24 { font-size: 24px; }
      .material-icons.md-30 { font-size: 30px; }
      .material-icons.md-36 { font-size: 36px; }
      .material-icons.md-48 { font-size: 48px; }
      .material-icons.md-60 { font-size: 60px; }
      /* Rules for using icons as black on a light background. */
      .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
      .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
      /* Rules for using icons as white on a dark background. */
      .material-icons.md-light { color: rgba(255, 255, 255, 1); }
      .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
      /*
      .material-icons.prefix.active {color: #ef5350;}
      */
      /* End Custom Material Icons -------------------------------------------- */
    </style>
  </head>

上面的样式之所以有效，是因为它们实际上是在页面本身中硬编码的。

如果我做这样的事情......

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <!-- Google Material Design Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Global.css - Custom Material Icons css inside -->
    <link href="global.css" rel="stylesheet">

  </head>

...它只是忽略了它们。这是为什么？

如果此自定义文件是在 Material Icons 之后加载的，是否无法从不同的 CSS 文件中为 CSS 文件中的 Material Icons 设置样式？

4

0 回答 0