将 Glyphicon 添加到每个按钮（引导程序 3.5）答案

【问题标题】：Add Glyphicon to Every Button (bootstrap 3.5)将 Glyphicon 添加到每个按钮（引导程序 3.5）
【发布时间】：2017-12-07 14:23:12
【问题描述】：

我想在所有默认按钮的文本之后添加一个字形图标。

我在这里找到了如何在列表中包含字形图标： Using a Glyphicon as an LI bullet point

我尝试将它应用于按钮，但我没有做对

.btn-default button:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
    color: #0099FF;
}

我意识到我可以这样添加：

<a class="btn btn-default" href="testpage.aspx">
    Learn more
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>

但我不想每次都添加它。我也想设置颜色。

【问题讨论】：

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

【解决方案1】：

你可能想要上面的图片输出你所有的按钮。

为此，您只需编写简单的 css :after class css 即可应用于文本后的所有默认按钮：

.btn-default:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    vertical-align: middle;
    padding: 6px 5px;
    color: #0099FF;
}

这将适用于您的所有按钮，如图所示。

【讨论】：

【解决方案2】：

我知道这是正确的做法：

<span class="glyphicon glyphicon-chevron-right"></span>

要赋予它不同的颜色，只需添加 class 或使用 selector 引用跨度并在 css 中赋予颜色。

.color-red { 
    color:#FF0000;
}

【讨论】：