将font-awesome图标添加到一系列按钮中

Question

我知道我可以专门为这样的按钮添加一个字体：

<a href="#" class="btn btn-default">Some text <i class="fa fa-chevron-right"></i></a>

但有没有办法可以创建一个CSS类，以便为所有按钮自动插入图标？

Answer 1

这是Glyphicon和FontAwesome。在内容中添加你的unicode（在CSS文件中找到）并创建一个适合你情况的类名，或者只是将它添加到.btn或.btn-default，但是改变css以反映：

FontAwesome：http://jsbin.com/seguf/2/edit *

Glyphicon：http://jsbin.com/seguf/1/edit

HTML

  <a href="#" class="btn btn-default btn-plus">Some text</a>  

http://jsbin.com/seguf/2/edit

CSS

.btn-arrow:after {
    font-family: 'FontAwesome';
    content: '\f054';
    padding-left: 5px;
    position: relative;
    font-size: 90%;
}


.btn-plus:after {
    font-family: 'Glyphicons Halflings';
    content: '\2b';
    padding-left: 5px;
    position: relative;
    top: 1px;
    font-size: 90%;
}

Answer 2

您可以使用:after pseudo-element：

在CSS中实现此目的

首先，从i元素中删除a元素，然后为您的a元素添加一个新类。我将使用＆＃34; chevron-right＆＃34;：

<a href="#" class="btn btn-default chevron-right">Some text</a>

现在导航到FontAwesome's Cheatsheet，找出您希望使用的图标的Unicode ID。在这里，我们将找到以下内容：

  

fa-chevron-right []

这意味着我们图标的Unicode ID（十六进制）为f054。

现在我们可以转到CSS文件并添加以下内容：

.chevron-right:after {
    content: '\f054';
    font-family: 'FontAwesome';
    padding-left: 5px;
}

请注意，我已将&#x的{​​{1}}替换为&#xf054并完全删除了分号。

这里有JSFiddle demo，同时显示HTML图标和CSS图标。

Answer 3

以下CSS规则将以AndroidManifest.xml元素为目标，然后注入一个.btn伪元素，将图标放在按钮的末尾。可能需要额外的造型。其他选项是使用JavaScript将:after元素注入所需的类。

<i>