CSS 为一系列按钮添加字体真棒图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25196091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add font-awesome icon to a series of buttons
提问by shenku
I know I can specifically add a font awesome to a button like this:
我知道我可以专门为这样的按钮添加一个很棒的字体：
<a href="#" class="btn btn-default">Some text <i class="fa fa-chevron-right"></i></a>
But is there a way I can create a CSS class so that the icon is automatically inserted for all buttons?
但是有没有一种方法可以创建一个 CSS 类，以便为所有按钮自动插入图标？
采纳答案by Christina
This is with Glyphicon and FontAwesome. Add your unicode (found in the CSS file) in the content and create a class name that is appropriate for your situation or just add it to the .btn or .btn-default, but change the css to reflect that:
这是 Glyphicon 和 FontAwesome。在内容中添加您的 unicode（在 CSS 文件中）并创建一个适合您情况的类名，或者只是将其添加到 .btn 或 .btn-default，但更改 css 以反映这一点：
FontAwesome: http://jsbin.com/seguf/2/edit*
FontAwesome：http://jsbin.com/seguf/2/edit *
Glyphicon: http://jsbin.com/seguf/1/edit
字形：http: //jsbin.com/seguf/1/edit
HTML
HTML
<a href="#" class="btn btn-default btn-plus">Some text</a>
CSS
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: 'b';
padding-left: 5px;
position: relative;
top: 1px;
font-size: 90%;
}
回答by James Donnelly
You can achieve this in CSS with the :afterpseudo-element:
您可以使用:after伪元素在 CSS 中实现这一点：
Firstly, remove the ielement from your aelement, then give your aelement a new class. I'm going to use "chevron-right":
首先，i从您的a元素中删除元素，然后给您的a元素一个新类。我将使用“chevron-right”：
<a href="#" class="btn btn-default chevron-right">Some text</a>
Now navigate to FontAwesome's Cheatsheetto find out the Unicode ID for the icon you're wishing to use. In here we'll find the following:
现在导航到FontAwesome 的 Cheatsheet以找出您希望使用的图标的 Unicode ID。在这里，我们将找到以下内容：
fa-chevron-right [
]
fa-chevron-right [
]
This means that the Unicode ID of our icon (in hexadecimal) is f054.
这意味着我们图标的 Unicode ID（十六进制）是f054.
Now we can go to our CSS file and add the following:
现在我们可以转到我们的 CSS 文件并添加以下内容：
.chevron-right:after {
content: '\f054';
font-family: 'FontAwesome';
padding-left: 5px;
}
Note that I've replaced the &#xof with \and dropped the semicolon completely.
请注意，我已经取代了&#x的具有\完全放弃了分号。
Here's a JSFiddle demoshowing both the HTML icon and the CSS icon in use together.
这是一个JSFiddle 演示，显示了一起使用的 HTML 图标和 CSS 图标。
回答by Govind jha
The following CSS rules will target the .btnelements and then inject a :afterpseudo element that will place the icon at the end of the button. Additional styling may be needed. Other options are to use JavaScript to inject the <i>element with needed classes.
以下 CSS 规则将针对.btn元素，然后注入一个:after伪元素，将图标放置在按钮的末尾。可能需要额外的样式。其他选项是使用 JavaScript 将<i>所需的类注入元素。
.btn:after {
font-family: 'FontAwesome';
content: '\f044';
padding-left: 5px;
position: relative;
font-size: 90%;
}
.btn:after {
font-family: 'FontAwesome';
content: '\f044';
padding-left: 5px;
position: relative;
top: 1px;
font-size: 90%;
}
