Bootstrap glyphicon 附加了 LESS，没有 html 触摸答案

【问题标题】：Bootstrap glyphicon appended with LESS, no html touchingBootstrap glyphicon 附加了 LESS，没有 html 触摸
【发布时间】：2014-11-03 04:11:34
【问题描述】：

我想知道是否有可能在不触及 HTML 的情况下附加 Bootstrap 字形图标并将其用作 LESS 混合，如下所示：

a {
 .glyphicon;
 .glyphicon-envelope;
}

任何帮助将不胜感激。

【问题讨论】：

看起来很可行，因此您希望所有 a（链接）都具有信封：之前？这很奇怪。记住这是一个伪元素，所以它不是 .selector a:before {.gyphicon;.glyphicon-envelope;} 吗？
当你混入 .glyphicon-envelope 时，它已经设置了伪类，你必须明确设置它。
@BassJobsen - 啊，很高兴知道。

标签： twitter-bootstrap twitter-bootstrap-3 less glyphicons

【解决方案1】：

是的，您可以：

少

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

a {
 .glyphicon;
 .glyphicon-envelope;
}

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

请注意，如果您想在没有完整 Bootstrap CSS 的情况下使用 CSS 或将字体定义添加到您的 Less 代码中，则不应在 @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');
}

还要考虑 Less 的 extend feature：

少

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

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

【讨论】：

这似乎不适用于输入字段（例如，使用 glyphicon-search 扩展 .searchbox）