我在哪裏可以獲得Facebook登錄/登錄按鈕的css？

我正在使用RoR，並且我使用了omniauth並在鏈接中創建了一個Facebook標誌。我想讓鏈接成爲Facebook按鈕，這些按鈕是您在使用社交登錄的網站上看到的。我在哪裏可以獲得Facebook登錄/登錄按鈕的css？

目前，我只是有

<%= link_to "Sign in with Facebook",user_facebook_omniauth_authorize_path %>

我用<i class="fa fa-facebook fa-2x"></i>嘗試，但它似乎並沒有工作。

有什麼建議嗎？

來源

2017-07-19 yamaoka

我認爲這將是有益的：

CSS

/* Shared */ 
.loginBtn { 
    box-sizing: border-box; 
    position: relative; 
    /* width: 13em; - apply for fixed size */ 
    margin: 0.2em; 
    padding: 0 15px 0 46px; 
    border: none; 
    text-align: left; 
    line-height: 34px; 
    white-space: nowrap; 
    border-radius: 0.2em; 
    font-size: 16px; 
    color: #FFF; 
} 
.loginBtn:before { 
    content: ""; 
    box-sizing: border-box; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 34px; 
    height: 100%; 
} 
.loginBtn:focus { 
    outline: none; 
} 
.loginBtn:active { 
    box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1); 
} 


/* Facebook */ 
.loginBtn--facebook { 
    background-color: #4C69BA; 
    background-image: linear-gradient(#4C69BA, #3B55A0); 
    /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/ 
    text-shadow: 0 -1px 0 #354C8C; 
} 
.loginBtn--facebook:before { 
    border-right: #364e92 1px solid; 
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat; 
} 
.loginBtn--facebook:hover, 
.loginBtn--facebook:focus { 
    background-color: #5B7BD5; 
    background-image: linear-gradient(#5B7BD5, #4864B1); 
}

HTML

<button class="loginBtn loginBtn--facebook"> 
    Sign in with Facebook 
</button>

您可以嘗試在此codepen。

所以，你的軌道鏈接將

<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path, class: 'loginBtn loginBtn--facebook' %>

我希望它能幫助

來源

2017-07-19 03:38:39 Jeremie

聽起來像你沒有在你的gemfile中捆綁FontAwesome圖標。有關說明，請參見https://github.com/bokmann/font-awesome-rails。你可以看到完整的圖標列表here。

來源

2017-07-19 03:07:26 kasperite

它看起來像你試圖使用Font Awesome。有一個Font Awesome Rails gem可以讓你使用Facebook圖標。

添加寶石到你的Gemfile和bundle吧。

如果您使用純CSS，添加到您的application.css文件：

/* 
*= require font-awesome 
*/

如果你喜歡無禮的話，你的application.css文件更改爲application.css.scss並添加行：

@import 'font-awesome';

然後你可以使用fa_icon輔助方法。

<%= link_to fa_icon('facebook', text: "Sign in with Facebook"), user_facebook_omniauth_authorize_path %>

來源

2017-07-19 03:12:05 Ryan

我在哪裏可以獲得Facebook登錄/登錄按鈕的css？

回答

相關問題