覆盖 Glyphicon 样式答案

【问题标题】：Overriding Glyphicon styles覆盖 Glyphicon 样式
【发布时间】：2018-11-16 07:35:56
【问题描述】：

如何覆盖 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 最后三个只是我的实验。

【问题讨论】：

标签： css styles glyphicons

【解决方案1】：

您的一些 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;
}

将解决您的问题。

【讨论】：

太棒了，谢谢！我将不得不研究 :before、:after、:less 等。我不了解它们。