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

<a href="#">Some text <i></i></a>

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

这是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="#">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%;
}

我使用字体真棒“x”图标 – 但它有一个白色背景 – 字体 – 真棒背景可以透明吗？

原因是,我想在图像上显示它.我需要选择什么选项？

现行守则是：

<i></i>

是的,字体真棒使用::之前的伪造的图标,所以简单地说,例如：

Demo Fiddle

i::before{
    background:transparent;
}

也就是说,你可能想要使用比i更多的特异性,例如：

i[class*=fa-times]::before{
   background:transparent;
}

在Chrome / Safari中,我在引导按钮中的图标看起来很好：

但在Firefox中,图标下降了一行：

我在< button>内浮动了fontawesome图标.

<!--html-->
<divrole="group" aria-label="...">
  <divrole="group">
     <button type="button">Cached logs<i></i></button>
  </div>

  <divrole="group">
   <button type="button">Logs on mount<i></i></button>
  </div>
</div>

<!--style-->
i.fa {
float: right;
top: 2px;
position: relative;
font-size: 12pt;
}
.glyphicon,i.fa {
color: rgb(90,90,90);
top: 1px;
}

如何使Firefox版本像Chrome一样？

JSBIN

将图标移动到文本的左侧.我不确定它与你如何得到它的不一致的根本原因 – 但这确实使两个浏览器一致地呈现它.

<button type="button"><i></i>Logs on mount</button>

代替

<button type="button">Logs on mount<i></i></button>

字体真棒的示例用例就是这样(从 their examples开始)：

<ul>
    <li><i></i> Lists</li>
    <li><i></i> Buttons</li>
    <li><i></i> Button groups</li>
    <li><i></i> Navigation</li>
    <li><i></i> Prepended form inputs</li>
</ul>

只要列表项为1行,此列表对我的目的是很好的.但如果列表项是多行,那么第二行,并且进一步不会正确缩进(默认情况下).

如果这些图标可以用作标准的css项目符号,那将是很好的,因为这样多行项目会自动缩进.

有没有一个简单和优雅的方式来实现这一点？如果我可以使用这样的标记,这将是非常棒的：

<ul>
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
    <li>Navigation</li>
    <li>Prepended form inputs</li>
</ul>

即重用特定的图标类,但使它们成为li元素的一部分.

Johan的答案是不正确的.
Font Awesome使用网络字体,而不是大的背景图像！

应该注意的是,你可以简单地把类放在li标签上,就像这样：

<ul>
    <li>Lists</li>
    <li>Buttons</li>
    <li>Button groups</li>
    <li>Navigation</li>
    <li>Prepended form inputs</li>
</ul>

然而,有一个警告,即使使用条件的ie7样式表,它也不会在ie7中运行.
列表项目消失,只是离开图标！
如果你不支持ie7,那就简单地省略条件样式表,那么至少那些不幸使用ie7将仍然能够读取你的列表,而不是图标！

希望这可以帮助.

我需要创建一个SVG(带有 PHP和/或 Javascript),其中一些SVG元素是 FontAwesome中的图标,但是没有外部依赖关系(如：导入css文件等).

我发现了this stackoverflow问题,这是一个类似的主题,但不符合我的问题,因为有外部依赖关系,例如在显示svg的网页上添加FontAwesome(CSS文件).

不同的是,我需要一个一体化SVG,其中所有必需的FontAwesome定义都是svg的一部分,因为用户应该能够下载生成的SVG,以使用svg查看器或编辑器继续使用它.

有没有办法把(例如)一个“Font Awesome”图标的定义放在一个svg中？

我发现了this(可能)svg信息列表.所以看起来像图标路径可用作SVG代码.那么我可以在svg中使用这个？

//更新：我发现以下示例,但我不知道,如何包含FontAwesome定义以及如何访问图标:-(

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-units-per-em="1000" cap-height="600" x-height="400"
          ascent="700" descent="300"
          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
      <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>

你的例子是一个SVG字体,它不适用于IE或Firefox.您需要将FontAwesome编码为数据URI,并将其嵌入@ font-face,如果您希望它在任何地方工作：

<svg width="500" height="200" version="1.1" xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200">  
    <defs>
      <style type="text/css">
        @font-face {
          font-family: 'FontAwesome';
          src: url(data:font/opentype;base64,[...]) format('opentype');
        }
      </style>
    </defs>
    <rect x="0" y="0" height="100" width="500" fill="#eee" />
    <text x="20" y="50" font-family="FontAwesome" font-weight="normal" font-size="32">
      &#xf007
    </text>
  </svg>

将[…]替换为base64编码版本的字体.您可以将.ttf或.otf文件上传到base64服务或命令行openssl base64 -in< infile> -out< outfile&gt ;. 如果要将FontAwesome的库子集,您可以前往icomoon http://icomoon.io/app/#library并添加FontAwesome库.然后选择所需的图标,下载zip,然后将ttf上传到base64编码服务(如此http://www.opinionatedgeek.com/dotnet/tools/base64encode/),并将生成的字符串粘贴到src：font-face声明中.