Bootstrap Button Glyphicon

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:

<a href="#" class="btn btn-success"><span class="glyphicon glyphicon-chevron-left"></span> Default text here</a>

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
<a href="#" class="btn btn-success my-btn my-chevron-left">Default text here</a>

//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