html - 使用 Twitter Bootstrap 3 的社交按钮

Question

我正在尝试向我的网站添加一些社交按钮，样式正确但图标没有出现。我认为这一定是 Font Awesome 的问题，因为这是图标的来源，但我看不出哪里出错了。

我像这样把它链接在头上:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

正文中的按钮如下所示:

<div id="contact_page">
  <div class="container">
    <div class="row">
      <div class="span4 pull-center">
        <button class="btn btn-twitter"><i class="icon-twitter"></i> | Connect with Twitter</button><br>
        <button class="btn btn-linkedin"><i class="icon-linkedin"></i> | Connect with LinkedIn</button><br>
      </div>
    </div>
  </div> 
</div>

Answer 1

由于您正在尝试使用 Font Awesome 4.0.3，因此您必须使用最新的类名才能正确使用。而不是 icon-*你必须使用 fa fa-* (更多变化在 official examples 中)

在您的情况下，更改 <i>到:

<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>

如果你想要的不仅仅是一个图标和一个简单的分隔符，你可以查看 Social Buttons for Bootstrap 更高级的东西(免责声明:我是创作者)它与最新版本配合得很好，如果您想添加更多，它非常灵活。