Twitter bootstrap 引导图示符图标附加较少，无html触摸

我想知道是否有可能在不接触HTML的情况下附加一个引导图示符图标，并将其用作一个较少的混入，如下所示：

a {
 .glyphicon;
 .glyphicon-envelope;
}

任何帮助都将不胜感激。

是的，您可以：

更少

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

a {
 .glyphicon;
 .glyphicon-envelope;
}

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

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

将编译为以下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";
}

请注意，如果您希望在没有完整引导CSS的情况下使用CSS，或者将字体定义添加到Less代码中，则不应将reference关键字与@import一起使用：

@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');
}

也考虑较少：

更少

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

a {
 .glyphicon;
 .glyphicon-envelope;
}

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

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

---

看起来很可行，所以你希望所有的a（链接）都有信封：之前？真奇怪。记住这是一个伪元素，不是吗。选择器a:在{.gyphicon；.glyphicon envelope；}之前？当您混入

.glyphicon envelope

时，它已经设置了伪类，您必须显式地设置它。@BassJobsen-ah，这很好。这似乎对输入字段不起作用（例如，使用glyphicon搜索扩展搜索框）