Question

我想在我的网站上添加社交媒体图标。我希望它们看起来像圆角的正方形。我已经通过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>

如何使这个语法正确才能使其工作？欢迎提供所有指导和建议

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

要堆叠多个图标，请使用父级的fa-stack类，使用常规大小图标的fa-stack-1x，以及大图标的fa-stack-2x。

正确的格式是：

＆＃13;

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

＆＃13;

BTW：您的HTML无效。 li必须是ul的孩子。

Bootstrap社交媒体图标不起作用，如引导网站上所示

2 个答案: