Материал Дизайн Иконки.Невозможно применить пользовательские классы из вторичного файла CSS.Зачем? - PullRequest
Новая
       29

Материал Дизайн Иконки.Невозможно применить пользовательские классы из вторичного файла CSS.Зачем?

0 голосов
/ 20 мая 2018

Я, должно быть, упускаю кое-что о том, как настраивать значки дизайна материалов НЕ на странице 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>

... это простоигнорирует их.Почему это так?

Разве невозможно стилизовать значки материалов в файле CSS из другого файла CSS при условии, что этот пользовательский файл загружен ПОСЛЕ Значки материалов?

...