使用我的当前代码，离线导入Material Design图标应该可以工作吗？

Question

使用我的当前代码，离线导入Material Design图标应该可以工作吗？

3

我目前正在为一款自动化停车系统设计用户界面。它需要能够离线工作，因为我们不知道代客泊车员是否有互联网连接。我还需要使用Material Design图标。我运行了我的HTML代码测试是否可以在离线情况下使用Material Design图标，但是有时页面加载正常，有时Google Chrome会崩溃。我将非常感激有关发生了什么以及如何确保我的页面在离线情况下加载所需的Material Design图标的见解。

<!DOCTYPE html>
  <html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
      <!--Import the css I designed for this UI specifically-->
      <link type="text/css" rel="stylesheet" href="css/menu.css"/>
      <!--Import Material Design icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import jQuery before materialize.js-->
      <script src="jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <!--Import jQuery Keypad CSS-->
      <link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
      <script type="text/javascript" src="js/jquery.plugin.js"></script>
      <script type="text/javascript" src="js/jquery.keypad.js"></script>

      <!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
      <script>
        $(document).ready(function(){
          $('#inmenuKeypad').keypad({target: $('#ticket_num'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
          });
        });
      </script>
    </head>

    <body>
      <!--Page Title Panel-->
      <div class="card-panel">
        <h4>INPARK</h4>
        <!--Options button, reveals dropdown menu with options to switch to other pages-->
        <a id="optionsbtn" class='dropdown-button btn' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
      </div>
      <!--Dropdown menu structure and it's items-->
      <ul id="dropdown1" class="dropdown-content">
        <li><a href="dashmenu.html">Dashboard</a></li>
        <li class="divider"></li>
        <li><a href="outmenu.html">Outpark</a></li>
        <li class="divider"></li>
        <li><a href="qmenu.html">Outpark Queue Menu</a></li>
        <li class="divider"></li>
        <li><a href="shufflemenu.html">Shuffle</a></li>
        <li class="divider"></li>
      </ul>
      <!--The form where valet inputs the customer's ticket number for Inpark-->
      <div class="row">
        <form class="col s12" action="ineem.html"><!--Change to the action to send data to some kind of data handler page/script-->
          <div class="row">
            <div class="input-field col s5 offset-s3">
              <input placeholder="Enter ticket number" id="ticket_num" type="text" class="validate">
            </div>
            <button class="btn waves-effect waves-light" class="col s9" type="submit">OK</button>
          </div>
        </form>
      </div>
      <!--Dashboard button, press to return to dashboard(FAB)-->
      <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
          <i class="material-icons" style="font-size: 48px">home</i>
        </a>
      </div>
      <!--Touchscreen Keypad-->
      <div id="inmenuKeypad"></div>

    </body>
  </html>

- The Mediocre Gatsby

2个回答

2

请查看Material Icons Guide中的“获取图标”部分。我使用npm（或bower），如下所示：

npm install material-design-icons --save

然后只需在包中包含的material-icons.css文件中引用源代码：

<link href="node_modules/material-design-icons/iconfont/material-icons.css"
  rel="stylesheet">

当然，您需要根据您的实际情况更改路径。

- ervi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bjoerg · Accepted Answer

您仍然在上述代码中包含了一个指向https://fonts.googleapis.com/icon?family=Material+Icons的链接。

我在HTML头部中找到的唯一图标链接是：

<link href="fonts/google-material/material.css" rel="stylesheet" />

material.css 文件包含以下定义：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  width: 1em;
 /* height: 1em;
  line-height: 1;*/
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在HTML中，我使用“&#x[code];”定义，这些图标在所有浏览器中脱机显示得非常好。

<i class="material-icons">&#xE14F;</i>

我从这里获取了该库：Material icons guide。