-1

I have a website were I can login with a Facebook account, The only problem I get right now is that I can't get the glyphicon from Facebook in front of my text in the button. Down here you see the code. I am using Bootstrap too,

<input type="button"onclick="window.location = '<?php echo $loginURL ?>';"
class="btn btn-block btn-social btn-facebook" value="Login met Facebook">

This is how it looks like:

the button

And I want to get something like this:

fucture facebook button

I know you need to use a span class but I can't get it to work in the same button, if I use the span I get the icon but not in the same button but under or above it.

This is the code I got now and it looks the way I want it to but now the link doesnt work.. So I press the button but nothing happens.. 

<button onclick="window.location = '<?php echo $loginURL ?>';" 
class="btn btn-md" style="background-color:#3b5998; color:white; width:100%;">
<span class="fa fa-facebook mr-2"></span> Sign in with Facebook

The code down below is the code that works but doesnt look the way I want..

<input type="button" onclick="window.location = '<?php echo $loginURL ?>';"
value="Login met Facebook" class="btn btn-block btn-social btn-facebook">
tom
  • 73
  • 8

3 Answers3

2

You have two solutions.

  1. change the <input> Element into the <button> element. (Easy Solution)

  2. you have to use the ::before CSS selector, This requires changing the Font-Family to Font-Awesome font and put the correct unicode into the content CSS property. (Toughest)

Easiest Solution:

  • change the <input> Element into <button> Element

  • Add any span element with the class for the FaceBook Icon.

kingmaker
  • 59
  • 6
  • I just tried it and could not get it to work perfectly? Can you send me the code you want me to use/try? – tom Jan 30 '18 at 13:29
  • You already had it in your code successfully @tom. But still you can try with **few Styles** `` – kingmaker Jan 30 '18 at 13:43
  • Thx mate! it worked! I got made the button bigger in the width, but now I want to have the F from Facebook to be on the beginning and the text in the middle,but I got the text in the middle but the F is also next to it and not on the beginning of the line. @kingmaker – tom Jan 30 '18 at 13:50
  • What width you need to change, buddy @tom? – kingmaker Jan 30 '18 at 13:52
  • I edited the question @kingmaker , I would love the result to be just like the second image in the question but with the text in the middle. – tom Jan 30 '18 at 13:55
  • Btw I just saw that your code isnt working for me because I need the onclick and the php code @kingmaker – tom Jan 30 '18 at 14:05
  • Add the **`onclick="window.location = '';"`** to my ` – kingmaker Jan 30 '18 at 14:06
  • Yeahh I already figured that out :3 , the only thing is still that I want the F on the left and the text in the middle but if I add the text-align:left code on the button element it puts everything on the left .. so also the text. – tom Jan 30 '18 at 14:11
  • Wrap the text **"login with Facebook"** within a **``** element and add equal Left&right padding to it...... – kingmaker Jan 30 '18 at 14:19
  • **** this is what I got now but I dont care anymore about where the text is but the onclick doesnt work or something, because I can click on it but I its not working – tom Jan 30 '18 at 14:31
  • Inspect the element to find if the **PHP** has correctly echoed out.... – kingmaker Jan 30 '18 at 15:01
  • There is no message – tom Jan 30 '18 at 15:05
  • I put the code I am using atm in the question, I also showed the code that does work but is not looking the way I want it too – tom Jan 30 '18 at 16:06
0

This will work.

First of all you have to include font-awesome library in your code by typing

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' />

and then use font-awesome class for icons.

<button onclick="window.location = '<?php echo $loginURL ?>';"
  class="btn btn-block btn-social" value="Login met Facebook">
    <i class="fa fa-facebook" aria-hidden="true"></i> Login with Facebook
</button>
Pradip Dhakal
  • 1,872
  • 1
  • 12
  • 29
0

The glyphicon btn-facebook does not exist in the Bootstrap Library. https://getbootstrap.com/docs/3.3/components/

Use e.g facebook-square from: http://fontawesome.io/icons/

Matias K.
  • 37
  • 10
  • Thx! Now I get the image in front of it but now the color of the button is gone some kind of white color and not the facebook color anymore.. how to fix that? – tom Jan 30 '18 at 13:33
  • [Check this link](https://stackoverflow.com/questions/18334851/change-the-color-of-glyphicons-to-blue-in-some-but-not-at-all-places-using-boot) – Matias K. Jan 30 '18 at 13:37