Html 使用 Twitter Bootstrap 3 的社交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20036969/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Social buttons using Twitter Bootstrap 3
提问by user2953989
I'm trying to add some social buttons to my website, the styling is correct but the icons aren't appearing. I assume this must be an issue with Font Awesome as that's where the icons come from but I can't see where I've gone wrong.
我正在尝试向我的网站添加一些社交按钮，样式正确但图标没有出现。我认为这一定是 Font Awesome 的问题，因为那是图标的来源，但我看不出哪里出错了。
I linked it in the head like so:
我把它链接在头上，如下所示：
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
and the buttons in the body like so:
和 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>
回答by Lipis
Since you're trying to use the Font Awesome 4.0.3 then you'll have to use the latest class names to have it right. Instead of icon-*you'll have to use the fa fa-*(more changes in the official examples)
由于您尝试使用 Font Awesome 4.0.3，因此您必须使用最新的类名才能使其正确。而不是icon-*您必须使用fa fa-*（官方示例中的更多更改）
In your case change the <i>to:
在您的情况下更改<i>为：
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
If you want to have something more advanced than just an icon and a simple separator you could check the Social Buttons for Bootstrap(Disclaimer: I'm the creator) which works nicely with the latest versions and it's very flexible if you want to add more.
如果你想要更高级的东西，而不仅仅是一个图标和一个简单的分隔符，你可以检查Bootstrap的社交按钮（免责声明：我是创建者）它与最新版本很好地配合，如果你想添加更多，它非常灵活.
回答by Norbert Pisz
Probably you don't have these classes.
可能你没有这些课程。
Check this: Social buttons for Bootstrap
检查这个： Bootstrap 的社交按钮
or this example: Social media icons with font awesome
或者这个例子： 带有超赞字体的社交媒体图标
