Bootstrap 3 - Glyphicon Background

by Kyle Mitofsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="box">
  <i class="glyphicon glyphicon-plus-sign my-plus"></i>
</div>


<div class="box">
  <span class="fa-stack fa-lg my-plus-stack">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
  </span>
</div>




<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24874615/1366033'>How to style inside of glyphicon?</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3 Skeleton</a><br/>
<div>

CSS

.box {
    width: 60px;
    height: 60px;
    background: #d0caff;
    text-align:center;
    padding: 10px;
    margin: 10px;
}
.my-plus {
    color: #006800;;
    background: white;
    border-radius: 50%;
    font-size: 32px;
}

.my-plus-stack .fa-circle {
  color: #006800;
}