FontAwesome Question on StackOverflow

by Luca De Nardi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<h3>Dynamic FontAwesome</h3>
<button class="one" glyph="\f005">What I get </button>
<span class="fa fa-star"></span><button class="two">What I would like</button>
<br><br><br><br><br><br><br><br>
    <small>Fiddle generated for the current question: <a href="http://stackoverflow.com/questions/31518250/css-attr-set-fontawesome-glyph-dinamycally-inside-before-after">StackOverflow Question</a></small>

CSS

button{
    position: absolute;
    left: 100px;
}
.two{
    top: 100px;
}
.one:before{
    font-family: FontAwesome;
    content: attr(glyph);
    display: block;
    position: absolute;
    left: -50px;
}
span{
    position: absolute;
    left: 50px;
    top: 105px;
}