Question

我有简单的html页面并使用实现CSS框架。我想使用物化图标。 <head>标记包含

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="../css/materialize.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<body>包含：

<div class="search-wrapper card">
   <input id="search">
   <i class="material-icons">search</i>
   <div class="search-results"></div>
</div>

页面将其显示为文本，而不是图标

如果我放<i class="small mdi-action-search"></i>那么它就可以了。

但我不明白为什么<i class="material-icons">search</i>无效。

我该怎么做才能使它有效？

Answer 1

如果你没有

，你需要将这些添加到项目中

  <link href="css/materialize.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在正文中添加此脚本

<script src="js/materialize.min.js"></script>

examaple usage

<i class="material-icons left">search</i>

这是我项目代码之一

的主要部分

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Your app title -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->

    <title>My App</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--<link href="lib/framework7.ios.min.css" rel="stylesheet" />
    <link href="lib/framework7.ios.colors.min.css" rel="stylesheet" />-->
    <link href="lib/font-awesome.min.css" rel="stylesheet" />
    <link href="lib/framework7.material.min.css" rel="stylesheet" />
    <link href="lib/framework7.material.colors.min.css" rel="stylesheet" />
    <link href="lib/my-app.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/materialize.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Answer 2

由于我使用IntelliJ Idea，因此出于某些原因默认使用utf-16编码。

右键单击文件内容并将文件编码更改为utf-8有帮助

如何显示实现图标？

2 个答案: