JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
Where to start from:<br>
<span class="custom glyphicon glyphicon-ok-circle"></span>
    
<br><br>
Try 1: <br>   
<span class="custom c2 glyphicon glyphicon-ok-circle"></span>
    
<br><br>Goal to achieve:<br>
    <img src="http://fs2.directupload.net/images/150101/gxdavpdq.png"/>

CSS

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
.custom {
    margin-left:10px;
    background-color:white;
    border-radius: 50%;
    padding: 4px 3px 0 3px;
    border: 3px #ccc solid;
}
.c2 {
    background:black;   
}