<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> [class^="ico-"], [class*=" ico-"] { font-family: 'Glyphicons Halflings'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ico-nulticolor:before { color:red; content: "\e042"; } .ico-nulticolor{ padding-top:1px; font-size:45px;height:47px;width:56px; color:#3FA9F5; letter-spacing: -48px; } </style> <div class="container"> <h1 class="page-header">multicolor icons</h1> <p>Font icon doesn't have multicolors option. Idea is to use layered icons which are overlap to each others.</p> <h4>icon by class name</h4> <span class="glyphicon glyphicon-tag"></span> + <span class="glyphicon glyphicon-tags"></span>  = <span class='ico-nulticolor'></span> </div> <style> h4{ margin-top:50px; } .glyphicon { font-size: 45px; } </style>