Bootstrap glyphicon appended with LESS, no html touching

Question

I wonder if there's a possibility to append a Bootstrap glyphicon without touching HTML and use it as a LESS mixin like so:

a {
 .glyphicon;
 .glyphicon-envelope;
}

Any help would be appreciated.

Answer 1

Yes, you can:

less

@import "variables.less";
@import (reference) "glyphicons.less";

a {
 .glyphicon;
 .glyphicon-envelope;
}

will compile into the following CSS:

a {
  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;
}
a:before {
  content: "\2709";
}

Notice that you should not use the reference keyword with the @import if you want to use the CSS without the complete Bootstrap CSS or add the font definition to your Less code:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
       url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
}

Also consider the extend feature of Less:

less

@import "variables.less";
@import (reference) "glyphicons.less";

a {
 &:extend(.glyphicon);
 &:extend(.glyphicon-envelope all);
}