Où puis-je obtenir le css pour un bouton de connexion/connexion sur Facebook?

Question

J'utilise RoR et j'ai utilisé omniauth et créé un lien facebook. Je veux faire du lien un bouton facebook, ceux que vous voyez sur les sites web qui utilisent les connexions sociales.

Actuellement, je viens

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

J'ai essayé d'utiliser <i class="fa fa-facebook fa-2x"></i> mais il ne semble pas fonctionner.

Des suggestions?

Answer 1

Je pense que ce sera utile:

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> 

Vous pouvez essayer cette codepen.

donc votre lien rails serait

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

J'espère que cela aide

Answer 2

Il semblerait que vous ne disposiez pas d'icônes FontAwesome dans votre gemfile. Voir https://github.com/bokmann/font-awesome-rails pour les instructions. Vous pouvez voir la liste complète des icônes here.

Answer 3

Il semble que vous essayez d'utiliser Font Awesome. Il y a un Font Awesome Rails gem qui vous permettra d'utiliser l'icône Facebook. Ajouter la gemme à votre Gemfile et bundle.

Si vous utilisez css plaine, ajoutez à votre application.css fichier:

/* 
*= require font-awesome 
*/ 

Si vous préférez Sass, modifiez votre fichier application.css à application.css.scss et ajoutez la ligne:

@import 'font-awesome'; 

Ensuite, vous pouvez utiliser la méthode d'assistance fa_icon.

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