как отображать материализованные значки?

У меня есть простая 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> не работает.

Что я должен сделать, чтобы заставить его работать?


intellij-idea html css materialize
person Ruslan    schedule 26.02.2016    source источник
comment
Вероятно, потому что материализующая структура включается после <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> и перезаписывает стили, установленные для элементов i, с помощью значков материалов css.   -  person NoNameProvided    schedule 26.02.2016
comment
Или старый браузер, не совместимый с лигатурой..   -  person Marcos Pérez Gude    schedule 26.02.2016
comment
По моему мнению, это вопрос позиции определения ссылок/скриптов. Вам следует подумать об изменении положения ‹link href=fonts.googleapis.com/icon?family. =Материал+Иконки rel=stylesheet› перед фреймворком   -  person Amulya Kashyap    schedule 26.02.2016

Ответы (2)


arrow_upward
1
arrow_downward

в голову вам нужно добавить их в проект, если у вас нет

  <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">
person pc_coder    schedule 26.02.2016
comment
это не способ достичь этого #cagri. Скрипт в ‹head› или ‹body› не имеет значения. Это работает всегда. По моему мнению, это вопрос позиции определения ссылок/скриптов. - person Amulya Kashyap; 26.02.2016

arrow_upward
0
arrow_downward

Поскольку я использую IntelliJ Idea, кодировка utf-16 по какой-то причине использовалась по умолчанию.

Щелчок правой кнопкой мыши по содержимому файла и изменение кодировки файла на utf-8 помогло

введите здесь описание изображения

person Ruslan    schedule 28.02.2019