Переопределение стилей Glyphicon - PullRequest
Новая
       10

Переопределение стилей Glyphicon

0 голосов
/ 16 ноября 2018

Как мне переопределить Glyphicons CSS? Мне нужно использовать значки с открытыми глазами и разговорами, но меньшего размера, белого цвета и с тенью. Я пытался добавить класс и прямой стиль, но Glyphicons CSS RULEZ! (Извините) 

<!DOCTYPE html>
<head>

    <!-- Glyphicons -->
    <link rel="stylesheet" href="/modules/glyphicons/css/glyphicons.css">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style>
.whiteicon{
color:white;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
text-decoration:none;
font-size:4px;
height:50%;
}
</style>

</head> 
<body>

<i class="glyphicons eye_open whiteicon" style="color:white;"></i>
<i class="glyphicons conversation whiteicon" style="color:white;"></i>

<i class="glyphicon glyphicon-camera whiteicon"></i>
<i class="glyphicon glyphicon-camera whiteicon" style="font-size:40px;"></i>
<i class="glyphicon glyphicon-camera whiteicon" style="font-size:50px;color:blue"></i>

</body>
</html>

http://dev.over60travel.com/sandbox/glyph.html Последние три только я экспериментирую.

1 Ответ

0 голосов
/ 16 ноября 2018

Некоторые из ваших символов Glyph используют :before Psuedo 

.glyphicons:before {
       position: absolute;
       left: 0;
       top: 0;
       display: inline-block;
       margin: 0 5px 0 0;
       font: 24px/1em 'Glyphicons Regular';
       font-style: normal;
       font-weight: normal;
       color: #ffffff;
       *: ;
       display: inline;
       *: ;
       zoom: 1;
       vertical-align: middle;
       text-transform: none;
       -webkit-font-smoothing: antialiased;
}

поэтому: 

.whiteicon:before {
    color: white;
}

Исправит вашу проблему.

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

Похожие темы

...