Overlay font awesome icons with less/css - html

Question

I want to create a custom icon using font awesome overlays, which I can easily using the following html
<span style="width: 18px; height: 18px; line-height: 18px;" class="fa-stack">
<i class="fa fa-circle fa-stack-1x" style="color: rgb(20, 77, 99); font-size: 18px;"></i>
<i style="font-size: 12px;" class="fa fa-question fa-stack-1x fa-inverse"></i>
</span>
I can simplify it a bit my removing the inline CSS, but what I would like is to be able to wrap the whole think in a css class for ease of reuse, so that I can just do something like
<i class="fa fa-my-icon"></i>
The problem is that I have no idea how to create a CSS rule that generates the DOM elements needed. Is this possible, and if so any pointers as to how it can be done? I'm not too familiar with less, but a solution based on that would be fine too.
I know how to do it using javascript, but I want to avoid that if possible.

Answer 1

Ok, figured it out with less. In case anyone else is trying to do this:
#import "font-awesome/less/variables.less";
#icon-size: 18px;
.icon-mixin() {
position: absolute;
text-align: center;
vertical-align: middle;
width: 100%;
left: 0;
}
.my-icon {
position: relative;
display: inline-block;
width: #icon-size;
height: #icon-size;
line-height: #icon-size;
vertical-align: middle;
color: blue;
&:before {
content: #fa-var-circle;
font-size: 18px;
.icon-mixin;
}
&:after {
content: #fa-var-question;
vertical-align: middle;
color: #fa-inverse;
.icon-mixin;
}
}