I have the following snippet of HTML..
<ul>
<li class="fa fa-balance-scale" id="test" />
</ul>
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-balance-scale:before {
/* font-awesome: balance-scale */
content: "\f24e"
}
.fa-hourglass-2:before,
.fa-hourglass-half::before {
/* font awesome: balance-scale, fa-hourglass-half */
content: "\f24e \f252";
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
vertical-align: -15%;
}
$("#test").addClass("fa-hourglass-half fa-lg")
<i class="fa" icon-before="" icon-after=""></i>
i:before {
/*balance-scale*/
content: attr(icon-before);
position: relative;
font-size: 1.5em;
margin: 0.1em;
}
i:after {
/*fa-hourglass-half*/
content: attr(icon-after);
position: absolute;
font-size: -0.5em;
/*margin-bottom: 2.0em;*/
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa.loading {
position: relative;
}
.fa.loading:after {
display: block;
position: absolute;
top: -8px;
right: -12px;
content: '\f252';
transform: scale(0.7, 0.7);
}
.fa-lg {
font-size: 1.33333333em;
line-height: .75em;
vertical-align: -15%;
}
If you are asking for an official 'font-awesome' way, I don't know it - but here's the logic behind how I'd try and do it.
First I would create a jsFiddle - and make sure that the font and other dependencies are loaded / so we're all on the same page: http://jsfiddle.net/sheriffderek/rqLkjmo3/2/ --- it looks like this link: http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css includes the @font inclusion and the css.
Then I would create some functionality to check:
<ul class='icon-list'>
<li class='icon fa fa-camera-retro' id='test'></li>
</ul>
<button rel='toggle'>toggle superscript</button>
jQuery in this case:
var $button = $('[rel="toggle"]');
$button.on('click', function() {
$('#test').toggleClass('waiting');
});
And then lay over something - in the top corner / is this font-awesome specific? / is there an hourglass-version of 'balance-scale' ? I don't know. I couldn't get .fa-balance-scale to work...
.icon-list {
padding: 1rem;
}
.fa.waiting {
position: relative;
}
.fa.waiting:after {
display: block;
position: absolute;
top: 0;
right: 0;
content: 'x'; /* whatevers */
color: red;
transform: translate(50%, -50%);
}
This logic should work for any type of graphic inclusion. Icons fonts were great when they were the best option, but that is no longer the case. Take a look at fontastic or something that will spit out a sprite sheet. : )