为每个按钮添加 Glyphicon (bootstrap 3.5)

Question

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

我在这里找到了如何在列表中包含字形图标：

我试过将它应用到按钮上，但我做对了

.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>

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

Answer 1

我知道这是正确的做法：

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

要给它不同的颜色，只需添加 class 或使用 selector 引用跨度，然后在 css 中指定颜色。

.color-red { 
    color:#FF0000;
}

Answer 2

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

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

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

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

为每个按钮添加 Glyphicon (bootstrap 3.5)

Add Glyphicon to Every Button (bootstrap 3.5)

twitter-bootstrap

glyphicons

twitter-bootstrap-3