替代Glyphicon样式



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

一些雕文图标正在使用:beforePsuedo

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

将解决您的问题。

相关内容

  • 没有找到相关文章

最新更新