MaterialIcons-Regular как ошибки шрифта, когда применяется любой CSS *: первая буква - PullRequest
0 голосов
/ 04 июля 2018

Мои значки MaterialIcons-Regular исчезают или превращаются в два разных значка, если я применяю какое-либо правило CSS к этому селектору, в то время как в Chrome.

 *:first-letter {
    color: #000 
}

Есть идеи, что здесь может быть не так?

Хотите увидеть, что я имею в виду? Ссылка для открытия в Firefox и в Chrome: https://jsfiddle.net/z7xmf81u/

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<style>
*:first-letter {color: blue;}
h1   {color: blue;}
p    {color: red;}
</style>

<body>
<p>test</p>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">network_check</i>

</body>
</html>

вы можете удалить

*: первая буква {цвет: синий;}

строка по желанию.

Любой обходной путь приветствуется, спасибо

1 Ответ

0 голосов
/ 04 июля 2018

Хммм ... Кажется, потому что это лигатурный шрифт.

При применении этого псевдоэлемента cloud становится "cloud", что не имеет эквивалента в значках Mat. В равной степени network_check становится "network_check", и возможно , что network и check do имеют эквиваленты MI. Возможно *:not(.material-icons) может работать?

*:not(.material-icons):first-letter {
  color: blue;
}

h1 {
  color: blue;
}

p {
  color: red;
}
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>


<body>
  <p>test</p>
  <i class="material-icons">cloud</i>
  <i class="material-icons" style="font-size:48px;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:red;">cloud</i>
  <i class="material-icons" style="font-size:60px;color:red;">network_check</i>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...