引导按钮字形图标答案

【问题标题】：Bootstrap Button Glyphicon引导按钮字形图标
【发布时间】：2015-08-28 14:35:39
【问题描述】：

我的问题很简单，但我无法让它发挥作用。我知道您可以像这样使用 Bootstrap + Glyphicon 制作一个按钮：

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

但是，我希望内容和样式分开（这很正常，对吗？），因为它使编辑变得容易得多（只需一个 scss 文件，而不是 54 个带按钮的 html 文件）。

我可以在按钮上使用 ::before 或 ::after 然后在 scss 中使用“内容”来包含 Glyphicon 吗？如果有，怎么做？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

第一个想法可能是做这样的事情

@import "variables";
@import "glyphicons";

.my-btn{
   &:before{
     .glyphicon;
     .glyphicon-chevron-left;
   }
}

但编译成类似：

.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";
}

和嵌套的伪元素如果我没记错的话是不可能的看到这个Nesting pseudo-elements inside pseudo-elements

所以你必须这样做：

//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：我用的比较少，在 SCSS 中很相似

【讨论】：

感谢您的努力，但仍然需要我在 HTML 中的所有按钮中添加“my-chevron-left”。