css - 为一系列按钮添加字体超棒的图标

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 以反射(reflect)这一点:

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

字形: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%;
}