如何在引导程序实现的网页中使用社交字形图标？答案

【问题标题】：How to use social glyphicons in bootstrap implemented web page?如何在引导程序实现的网页中使用社交字形图标？
【发布时间】：2014-08-29 04:53:15
【问题描述】：

我无法在引导程序实现的网页中使用社交媒体字形图标。我可以使用常用的搜索、地球仪等。

这是我常用的方法：

<span class="glyphicons glyphicons-search"></span>

如何为社交字形实现上述方法？

【问题讨论】：

标签： twitter-bootstrap glyphicons

【解决方案1】：

glyphicons that come free with Bootstrap 3 是full paid Glyphicons library 的子集，不包括社交媒体图标集。

相反，您可以使用Font Awesome，这是一个完全受支持的免费替代品（以及Bootstrap 4 中的首选图标套件），它具有免费的品牌图标集：

Font Awesome Version 4 - Brands - jsFiddle 中的演示和堆栈片段：

<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>

对于 Font Awesome 5，您仍然可以使用带有单独 brands bundle 的品牌：

&lt;i class="<b><i>fab</i></b> fa-youtube"&gt;&lt;/i&gt;

【讨论】：

但是，上面的 glyphicon 格式是否适用于 Bootstrap 框架？
@user3620928，绝对是！ Font Awesome 在构建时考虑了引导框架，并与字形图标向后兼容。有一段时间，字形图标甚至没有随 Bootstrap 一起提供。他们现在回来了，但我认识的大多数引导者更喜欢 FA。
fontawseome 在某些浏览器中出现很多问题
请注意，对于 Font Awesome 5，Brands 图标应该使用 fab 类而不是 fa 类，因此它现在应该是 <i class="fab fa-youtube"></i>
@MikePoole，谢谢迈克。我详细阐述了 FA 和 BS 的不同版本，以帮助扩展自原始答案时间点以来的更新

【解决方案2】：

将此粘贴到代码的头部

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

只是插入 facebook 图标的示例

<i class="fa fa-facebook"></i>

有关字形图标的完整列表，请访问https://fortawesome.github.io/Font-Awesome/icons/

【讨论】：

【解决方案3】：

如果使用 font-awesome 5 类已经改变。

现在您拥有的前缀不仅仅是 fa：fab, fas, far, fal。

例如，要显示 twitter 徽标，您需要这样的东西

<i class="fab fa-twitter"></i>.

您可以阅读有关从 font-awesome 4 迁移到 5 here 的更多信息。

【讨论】：