How to add image background to btn-default twitter-bootstrap button

Question

I try to design a bootstrap v3 3 5 button by using the existing class btn-default  below are the sample of codes of what I had done    x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt style type  text css  gt  x000D     sign-in-facebook x000D      x000D      background-image  url  http   i stack imgur com e2S63 png    x000D      background-position  -9px -7px  x000D      background-repeat  no-repeat  x000D      background-size  39px 43px  x000D      padding-left  41px  x000D      color   000  x000D      x000D     sign-in-facebook hover x000D      x000D      background-image  url  http   i stack imgur com e2S63 png    x000D      background-position  -9px -7px  x000D      background-repeat  no-repeat  x000D      background-size  39px 43px  x000D      padding-left  41px  x000D      color   000  x000D      x000D   lt  style gt  x000D   lt p gt My current button got white background lt br  gt  x000D   lt input type  button  value  Sign In with Facebook  class  btn btn-default sign-in-facebook  style  margin-top 2px  margin-bottom 2px    gt  x000D   lt  p gt  x000D   lt p gt I need the current btn-default style like below lt br  gt  x000D   lt input type  button  class  btn btn-default  value  Sign In with Facebook    gt  x000D   lt  p gt  x000D   lt strong gt NOTE  lt  strong gt  facebook icon at left side of the button  x000D   x000D   x000D    Sample facebook icon     How I can modify the class of  sign-in-facebook to create my own style button

User · Answer

This works with font awesome    lt button class  btn btn-outline-success  gt      lt i class  fa fa-print  aria-hidden  true  gt  lt  i gt     Print  lt  button gt

User · Answer

Instead of using input type button you can use button and insert the image inside the button content    lt button class  btn btn-default  gt        lt img src  http   i stack imgur com e2S63 png  width  20    gt  Sign In with Facebook  lt  button gt    The problem with doing this only with CSS is that you cannot set linear-gradient to the background you must use solid color    sign-in-facebook       background  url  http   i stack imgur com e2S63 png    f2f2f2      background-position  -9px -7px      background-repeat  no-repeat      background-size  39px 43px      padding-left  41px      color   000         sign-in-facebook hover       background  url  http   i stack imgur com e2S63 png    e0e0e0      background-position  -9px -7px      background-repeat  no-repeat      background-size  39px 43px      padding-left  41px      color   000         x000D   x000D  body   x000D    padding  30px  x000D    x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   lt style type  text css  gt  x000D     sign-in-facebook   x000D      background  url  http   i stack imgur com e2S63 png    f2f2f2  x000D      background-position  -9px -7px  x000D      background-repeat  no-repeat  x000D      background-size  39px 43px  x000D      padding-left  41px  x000D      color   000  x000D      x000D     sign-in-facebook hover   x000D      background  url  http   i stack imgur com e2S63 png    e0e0e0  x000D      background-position  -9px -7px  x000D      background-repeat  no-repeat  x000D      background-size  39px 43px  x000D      padding-left  41px  x000D      color   000  x000D      x000D   lt  style gt  x000D   x000D   x000D   lt h4 gt Only with CSS lt  h4 gt  x000D   x000D   lt input type  button  value  Sign In with Facebook  class  btn btn-default sign-in-facebook  style  margin-top 2px  margin-bottom 2px   gt  x000D   x000D   lt h4 gt Only with HTML lt  h4 gt  x000D   x000D   lt button class  btn btn-default  gt  x000D     lt img src  http   i stack imgur com e2S63 png  width  20    gt  Sign In with Facebook x000D   lt  button gt  x000D   x000D   x000D

User · Answer

Have you tried using a icon font like http   fortawesome github io Font-Awesome   Bootstrap comes with their own library  but it doesn t have as many icons as Font Awesome   http   getbootstrap com components  glyphicons

User · Answer

x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  gt  x000D   x000D   lt  -- Latest compiled and minified JavaScript -- gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt style type  text css  gt  x000D     sign-in-facebook x000D      x000D      background-image  url  http   i stack imgur com e2S63 png    x000D      background-position  -9px -7px  x000D      background-repeat  no-repeat  x000D      background-size  39px 43px  x000D      padding-left  41px  x000D      color   000  x000D      x000D     sign-in-facebook hover x000D      x000D      background-image  url  http   i stack imgur com e2S63 png    x000D      background-position  -9px -7px  x000D      background-repeat  no-repeat  x000D      background-size  39px 43px  x000D      padding-left  41px  x000D      color   000  x000D      x000D   lt  style gt  x000D   lt p gt My current button got white background lt br  gt  x000D   lt input type  button  value  Sign In with Facebook  class  sign-in-facebook btn btn-secondary  style  margin-top 2px  margin-bottom 2px    gt  x000D   lt  p gt  x000D   lt p gt I need the current btn-default style like below lt br  gt  x000D   lt input type  button  class  btn btn-default  value  Sign In with Facebook    gt  x000D   lt  p gt  x000D   lt strong gt NOTE  lt  strong gt  facebook icon at left side of the button  x000D   x000D   x000D

[css] How to add image background to btn-default twitter-bootstrap button?

Examples related to css

Examples related to twitter-bootstrap