使用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-*(官方示例中的更多更改)

在您的情况下,将更<i>改为:

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

如果你想拥有比图标和简单分隔符更高级的东西,你可以查看Bootstrap的社交按钮(免责声明:我是创建者),它与最新版本配合得很好,如果你想添加更多版本,它非常灵活.

Answer 2

可能你没有这些课程。

检查这个： Bootstrap 的社交按钮

或者这个例子： 字体很棒的社交媒体图标