覆盖 Glyphicon 样式

Question

如何覆盖 Glyphicons CSS？我需要使用睁眼图标和对话图标，但要更小、更白并带有阴影。我试过添加 class 和直接样式，但是 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 最后三个是我在试验。

Answer 1

您的一些字形图标正在使用 :before 伪

.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;
}

将解决您的问题。

覆盖 Glyphicon 样式

Overriding Glyphicon styles

css

styles

glyphicons