引导社交按钮答案

【问题标题】：Bootstrap social buttons引导社交按钮
【发布时间】：2014-11-04 08:24:40
【问题描述】：

我正在使用social buttons for twitter bootstrap 2。出于某种原因，按钮中的 Facebook“f”标志没有出现。这是我的前端代码：

{% include "meddy1/header.html" %}
{% load staticfiles %}

<link href="../../static/meddy1/css/social-buttons-3.css" rel="stylesheet">
<link href="../../../bootstrap-social-gh-pages/bootstrap-social.css" rel="stylesheet">
<link href="../../../font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet">


    <!-- CSS links -->
    <link href="{% static "meddy1/css/login-signup.css" %}" rel="stylesheet" media="screen">
    <link href="{% static "meddy1/css/login-signup-responsive.css" %}" rel="stylesheet" media="screen">
    <!-- End CSS links -->


 <div class="wrapper">
      <div class="container">

        <!-- Log In -->
        <div class="login">
          <h1> SIGN UP </h1>

  {% if user.is_authenticated and not user.is_superuser %}
      <h3>Hi {{ user.first_name }}. Thanks for loggin in!</h3> 
  {% else %}
      <buttton class="btn btn-facebook"><a href="{% url 'social:begin' 'facebook' %}?next={{ index }}" class="fa fa-facebook"> | Signup with Facebook</a></buttton>
  {% endif %}

  <h4> OR </h4>

  <form action="" method="post" id="user_uploader" enctype="multipart/form-data"> {% csrf_token %}
   {% for field in form.visible_fields %}
                {{ field.errors }}
                {{ field.help_text }}
                {{ field }}
            {% endfor %}

   <p class="alert">By Clicking “Sign Up” below, you are agreeing to the Meddy <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a></p>

    <button class="btn btn-primary" type="submit" name="submit" id="ss-submit">SIGN UP</button>
    <form></form>

    <button class="btn btn-facebook"><i class="fa fa-facebook"></i> | Connect with Facebook</button>




</div>
        <!-- End Log In -->

      </div>
    </div>
    <!-- End Content -->


  </body>
</html>

{% include "meddy1/footer.html" %}

我是否缺少指向任何重要文件的链接？无法弄清楚为什么 Facebook 徽标没有出现。我的 webapp 在 Django 中。

【问题讨论】：

请发布 HTML 输出。还提供一个在线示例可能会有所帮助。
这可以解释它，有点来自 Font-Awesome 网站  警告！显然，Adblock Plus 可以通过“删除社交媒体按钮”设置删除 Font Awesome 品牌图标。我们不会使用黑客来强制它们显示。如果您认为这是一个错误，请报告 Adblock Plus 问题。要解决此问题，您需要修改社交图标类名称。尝试使用不同的图标，看看这是否可能是问题

标签： javascript python css twitter-bootstrap frontend

【解决方案1】：

我想通了。我不得不添加这一行：

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

【讨论】：

好吧，还有其他问题，因为您之前添加了对 font -awesome 的引用（来自您的项目文件夹）。无需加载 CSS 的两个副本，因此我怀疑您的 font awesome 字体文件夹在您的本地计算机上没有正确设置
所以我检查了我的 font-awesome.min.css，它看起来与 maxcdn.bootstrapcdn.com 上的完全不同
您在 maxcdn 中使用的是最小化的 CSS 文件（去除了额外的空格以使其加载更快），您网页中的那个是普通版本，保留了空格以方便阅读和开发

【解决方案2】：

您似乎缺少按钮标签内的 i 标签：

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

然后你会看起来像这样：

<buttton class="btn btn-facebook"><a href="{% url 'social:begin' 'facebook' %}?next={{ index }}" class="fa fa-facebook"><i class="fa fa-facebook"></i> | Signup with Facebook</a></buttton>

【讨论】：