如何覆盖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最后三个只是我在试验。
一些雕文图标正在使用: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;
}
将解决您的问题。