使用 Twitter Bootstrap 3 的社交按钮

Question

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

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

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

body 中的按钮如下：

<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

可能你没有这些课程。

检查这个： Social buttons for Bootstrap

或者这个例子： Social media icons with font awesome

Answer 2

由于您尝试使用 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（免责声明：我是创建者），它可以很好地与最新版本配合使用，如果您想使用它非常灵活添加更多。