将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伪元素在 CSS 中实现这一点：

首先，i从您的a元素中删除该元素，然后为您的a元素提供一个新类。我将使用“chevron-right”：

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

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

fa-chevron-right [ ]

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

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

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

请注意，我已经取代了&#x的&#xf054具有\完全放弃了分号。

这是一个JSFiddle 演示，显示了一起使用的 HTML 图标和 CSS 图标。