Bootstrap 社交媒体图标无法正常工作，如引导站点上所示答案

【问题标题】：Bootstrap social media Icons not working as shown on the bootstrap siteBootstrap 社交媒体图标无法正常工作，如引导站点上所示
【发布时间】：2016-04-18 16:00:22
【问题描述】：

我想将社交媒体图标添加到我的网站。我希望它们看起来像圆角的正方形。我已经通过 cdn 进行引导，并按照说明在我的 <head> 中添加了很棒的字体，所以我的头现在看起来像这样

<head>
     <title>{% block title %}{{post.title}}{% endblock title %}</title>

     <link href="{% static 'blog/css/blog.css' %}" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">


        <style>
            {% block style %}
            {% endblock style %}
        </style>

        <script   src="https://code.jquery.com/jquery-1.12.3.min.js"
                  integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

           <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>

        <!--<script type="text/javascript" src="http://content.jwplatform.com/libraries/WQWJdvRx.js"></script>-->

        {% block head_extra %}{% endblock head_extra %}

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

这就是我所拥有的，它是从站点复制和粘贴的，除了我在此处发布之前在教程中看到的容器 div，并认为通过添加它会有所作为。没有。

<div class="container">
         <a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
            <span class="fa fa-twitter"></span>
         </a>

        <li><a href="#"><i class="fa fa-lg fa-youtube-square"></i></a></li>
    </div>

如何使这个在语法上正确以使其工作？欢迎所有指导和建议

【问题讨论】：

标签： css twitter-bootstrap font-awesome

【解决方案1】：

<div class="container">
 <ul>
     <li><a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter"></i>
     </a></li>

    <li><a href="#"><i class="fa fa-youtube-square"></i></a></li>
 </ul>
</div>

【讨论】：

【解决方案2】：

根据Font Awesome Page

要堆叠多个图标，请在父级上使用 fa-stack 类，将 fa-stack-1x 用于常规大小的图标，将 fa-stack-2x 用于较大的图标。

正确的格式是：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
    <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
  </a>
  <a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-youtube" target="_blank">
    <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-youtube-square fa-stack-1x"></i>
</span>
  </a>
</div>

顺便说一句：您的 HTML 无效。 li 必须是 ul 的子级。

【讨论】：

这种格式只有在你想堆叠它们时才有效。它不适用于水平导航栏。
问题是关于一个带有圆形边框的图标......它准确地回答了这个问题。列表的布局与问题无关。