twitter-bootstrap 如何在引导程序实现的网页中使用社交字形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24632076/
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
How to use social glyphicons in bootstrap implemented web page?
提问by maheshkumar
I'm not able to use social media glyph-icons in bootstrap implemented web page. I was able to use the usual ones like search, globe and many more.
我无法在引导程序实现的网页中使用社交媒体字形图标。我能够使用常用的，如搜索、地球仪等等。
This is how I used the usual ones:
这是我如何使用通常的：
<span class="glyphicons glyphicons-search"></span>
How can you implement the above method for the social glyphicons?
您如何为社交字形实现上述方法？
回答by KyleMit
The glyphicons that come free with Bootstrap 3is a subset of the full paid Glyphicons libraryand doesn't include the social media icons set.
Bootstrap 3 免费提供的glyphicons是完全付费的 Glyphicons 库的一个子集，不包括社交媒体图标集。
Instead, you can use Font Awesome, a free alternative that is fully supported (and the preferred icon kit in Bootstrap 4), which has a free brand icon set:
相反，您可以使用Font Awesome，这是一个完全受支持的免费替代品（以及Bootstrap 4 中的首选图标工具包），它有一个免费的品牌图标集：
Font Awesome Version 4 - Brands- Demo in jsFiddle& Stack Snippets:
Font Awesome 版本 4 - 品牌- jsFiddle& Stack Snippets 中的演示：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-bitbucket"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-youtube"></i>
<style type="text/css">
.fa {
padding: 4px;
width: 200px;
}
.fa::before {
display: inline-block;
/* .fa-fw */
width: 1.28571429em;
text-align: center;
}
.fa::after {
content: attr(class);
font-family: consolas, monospace;
font-size: 15px;
/* .code */
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
margin-left: 5px;
}
</style>For Font Awesome 5, you can still use brands with the separate brands bundle:
对于Font Awesome 5，您仍然可以使用带有单独品牌包的品牌：
<i class="fab fa-youtube"></i>回答by Nanoripper
paste this in your code's head part
将此粘贴到您的代码的头部
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
and just an example for inserting facebook icon
只是一个插入 facebook 图标的例子
<i class="fa fa-facebook"></i>
For the whole list of glyph-icons, visit https://fortawesome.github.io/Font-Awesome/icons/
有关字形图标的完整列表，请访问https://fortawesome.github.io/Font-Awesome/icons/
回答by Radu Di??
If using font-awesome 5 the classes have changed.
如果使用 font-awesome 5，则类已更改。
Now you have more prefixes than just fa: fab, fas, far, fal.
现在你有更多的前缀，而不仅仅是 fa: fab, fas, far, fal。
To show the twitter logo for instance you need something like this
例如，要显示 Twitter 徽标，您需要这样的东西
<i class="fab fa-twitter"></i>.
<i class="fab fa-twitter"></i>.
You can read more about migrating from font-awesome 4 to 5 here.
