如何在使用Bootstrap实现的网页中使用社交图标？

Question

我无法在使用 Bootstrap 实现的网页中使用社交媒体图标。

我能够使用普通的图标，比如搜索、地球等等。

这是我使用普通图标的方法：

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

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

- maheshkumar

Answer 1

这段内容是关于编程的。它介绍了Bootstrap 3中免费提供的图标字体集，该集合是全套付费Glyphicons库的一个子集，不包括社交媒体图标集。

相反，您可以使用Font Awesome，这是一个完全免费的替代品，并得到全面支持（并且是Bootstrap 4中首选的图标套件），其中包含免费的品牌图标集。

Font Awesome Version 4 - Brands - 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>

对于Font Awesome 5，您仍然可以使用单独的品牌包与品牌相关的图标：

<i class="<b><i>fab</i></b> fa-youtube"></i>

- KyleMit

---

但是，上述的 glyphicon 格式能在 Bootstrap 框架中使用吗？ - maheshkumar

@user3620928，当然没问题！Font Awesome是以Bootstrap框架为基础构建的，并且与glyphicons具有向后兼容性。一段时间内，glyphicons甚至没有随Bootstrap一起发布。现在它们回来了，但我认识的大多数Bootstrap用户更喜欢使用FA。 - KyleMit

Font Awesome在一些浏览器中显示存在很多问题，尤其是在IOS Safari和Chrome中无法正常显示。 - Smith

请注意，使用 Font Awesome 5 时，品牌图标应该使用 fab 类而不是 fa 类，因此现在应该是 <i class="fab fa-youtube"></i>。 - Mike Poole

@MikePoole，谢谢Mike。我稍微详细阐述了FA和BS的不同版本，以帮助扩展原始答案发布时的更新内容。 - KyleMit

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

- Nanoturka

Answer 3

如果使用font-awesome 5，类名已经发生了变化。

现在你有更多的前缀，而不仅仅是fa：fab、fas、far、fal。

例如，要显示Twitter标志，你需要像这样的东西： <i class="fab fa-twitter"></i>。

你可以在这里阅读有关从font-awesome 4迁移到5的更多信息。

- Radu Diță