html - 如何显示物化图标?

标签 html css intellij-idea materialize

我有简单的 html 页面并使用 materialize 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>不起作用。

我应该怎么做才能让它发挥作用?

最佳答案

如果你没有,你需要将这些添加到元素中

  <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>

示例用法

<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">

关于html - 如何显示物化图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35651889/

相关文章:

javascript - 创建了一个 jar 头幻灯片(JS 和 JQuery)但移动 jar 头有困难

javascript - 如何使用正则表达式和 javascript 将 1 1/2 重新格式化为相当分数 HTML

html - 谷歌如何看待没有文本、只有背景的链接?

html - 为什么 flexbox justify-content space-between 不起作用?

Java错误: release version 14 not supported in IntelliJ IDEA

html - 在没有 JS 的情况下调整灯箱的位置

javascript - 将共享的 'code_block' 从 loc-A 移动到 loc-B,只有一个 'code_block' 的写入实例

jquery - 在 underscore.js 模板脚本中实现选定的选择下拉列表的问题

java - 测试在 JUnit 4 而不是 JUnit 5 下运行——编译干净,但执行 0 个测试

java - 在 IntelliJ IDEA 中测试小代码片段的快捷方式?