Bootstrap社交按鈕

我正在使用social buttons for twitter bootstrap 2。出於某種原因，按鈕中的Facebook「f」徽標未顯示出來。這是我的前端代碼：Bootstrap社交按鈕

{% 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。

來源

2014-09-10 maahd

請發佈HTML輸出。還提供在線示例可能會有所幫助。 – 2014-09-10 16:20:54

這可以解釋一下，來自Font-Awesome網站警告！顯然，Adblock Plus可以使用其「刪除社交媒體按鈕」設置刪除Font Awesome品牌圖標。我們不會使用黑客來強制他們展示。如果您認爲這是一個錯誤，請報告Adblock Plus的問題。要解決此問題，您需要修改社交圖標類名稱。嘗試使用不同的圖標來查看是否可能是問題 – Sparky 2014-09-10 17:10:59

我想通了。我不得不添加以下行：

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

來源

2014-09-10 19:16:56 maahd

那麼，因爲您之前添加了對-awesome（來自項目文件夾）的引用，所以其他內容是錯誤的。不需要加載兩個CSS副本，所以我懷疑你的本地機器 – Sparky 2014-09-10 19:27:18

上沒有正確設置字體真棒字體文件夾，所以我檢查了我的font-awesome.min.css文件，它看起來與maxcdn.bootstrapcdn.com – maahd 2014-09-10 19:37:43

從maxcdn使用的是最小化的CSS文件（爲了加載速度更快，刪除了額外的空白），網頁中的文件是普通版本，保留空白以便讀取和開發 – Sparky 2014-09-10 21:31:42

它看起來像你缺少按鈕標籤裏面的我的標籤：

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

來源

2014-09-10 18:49:55 Bbovenzi

Bootstrap社交按鈕

回答

相關問題