Bootstrap 社交媒体图标无法像 bootstrap 网站上显示的那样工作

Question

我想在我的网站上添加社交媒体图标。我希望它们看起来像带圆角的正方形。我已经通过 cdn 获得了 bootstrap，按照说明我在我的 <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>

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

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

Answer 2

根据 Font Awesome Page

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.

正确的格式应该是：

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

的子代

Bootstrap 社交媒体图标无法像 bootstrap 网站上显示的那样工作

Bootstrap social media Icons not working as shown on the bootstrap site

css

twitter-bootstrap

font-awesome