Search code examples
cssstylesglyphicons

Overriding Glyphicon styles

How do I override Glyphicons CSS? I need to use the eye-open and conversation icons but smaller, white and with a drop shadow. I've tried adding a class and a direct style, but Glyphicons CSS RULEZ! (sorry)

<!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 The last three are just me experimenting.

Solution

  • Some of your Glyph Icons are using a :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;
}

    therefore:

    .whiteicon:before {
    color: white;
}

    Will fix your issue.