Bootstrap Button Glyphicon - css

Question

My question is pretty simple, but I can't get it to work.
I understand that you can make a button with Bootstrap + Glyphicon like so:
<span class="glyphicon glyphicon-chevron-left"></span> Default text here
But, I want the content & styling seperate (as is normal, right?), because it makes editting a lot easier (just one scss file instead of 54 html files with buttons).
Can I use ::before or ::after on the button and then use "content" in scss to include a Glyphicon? If so, how?

Answer 1

The first idea probably is do something like this
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
.glyphicon-chevron-left;
}
}
but that compile into something like:
.my-btn:before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
content: "\e079";
}
And nested pseudo-elements It is not possible if I am not mistaken see this Nesting pseudo-elements inside pseudo-elements
So you have to do this:
//HTML
Default text here
//CSS
#import "variables";
#import "glyphicons";
.my-btn{
&:before{
.glyphicon;
}
&.my-chevron-left{
.glyphicon-chevron-left;
}
}
PD: I'm using less, in SCSS is quite similar