使用LESS附加Bootstrap glyphicon，无需触及HTML。

Question

使用LESS附加Bootstrap glyphicon，无需触及HTML。

twitter-bootstraptwitter-bootstrap-3lessglyphicons

4

我想知道是否有可能在不更改HTML的情况下添加Bootstrap glyphicon，并像以下LESS mixin一样使用它：

a {
 .glyphicon;
 .glyphicon-envelope;
}

任何帮助都将不胜感激。

- David

1

看起来很容易，所以你想让所有的a（链接）都有envelope：before？这很奇怪。记住这是一个伪元素，所以应该是.selector a:before { .gyphicon; .glyphicon-envelope; }吗？ - Christina

1

当你混合使用.glyphicon-envelope时，它已经设置了伪类，你不必明确设置。 - Bass Jobsen

@BassJobsen - 啊，知道了，那很好。 - Christina

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bass Jobsen · Accepted Answer

是的，你可以：

少量的

@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或将字体定义添加到Less代码的情况下使用CSS，则不应该在@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的扩展功能：

less

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

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