HTML CSS - Adding an Icon to a button

Question

I making some css buttons and I want to add an icon before the text   Button Text      But I dont know how I should do this     HTML  lt div class  btn btn red  gt  lt a href     gt Crimson lt  a gt  lt span gt  lt  span gt  lt  div gt   CSS  body       margin  0      padding  10px      font-family  Verdana  Arial  Helvetica  sans-serif      font-size  14px       Glassy Buttons     btn       float  left      clear  both      background  url imgs button left png  no-repeat      padding  0 0 0 10px      margin  5px 0     btn a      float  left      height  40px      background  url imgs button middle png  repeat-x left top      line-height  40px      padding  0 10px      color   fff      font-size  1em      text-decoration  none     btn span       background  url imgs button right png  no-repeat      float  left      width  10px      height  40px     btn gray  background-color   808080    btn green   background-color   ADFF2F    btn blue  background-color   0000CD    btn red  background-color   DC143C

User · Accepted Answer

You could add a span before the link with a specific class like so:

<div class="btn btn_red"><span class="icon"></span><a href="#">Crimson</a><span></span></div>

And then give that a specific width and a background image just like you are doing with the button itself.

.btn span.icon {
    background: url(imgs/icon.png) no-repeat;
    float: left;
    width: 10px;
    height: 40px;
}

I am no CSS guru but off the top of my head I think that should work.

User · Answer

lt a href     class  btnTest  gt Test lt  a gt     btnTest     background url  images icon png   no-repeat left center     padding-left 20px

User · Answer

Here s what you can do using font-awesome library    x000D   x000D  button btn add  before   x000D    font-family  fontAwesome  x000D    content    f067 00a0   x000D    x000D   x000D  button btn edit  before   x000D    font-family  fontAwesome  x000D    content    f044 00a0   x000D    x000D   x000D  button btn save  before   x000D    font-family  fontAwesome  x000D    content    f00c 00a0   x000D    x000D   x000D  button btn cancel  before   x000D    font-family  fontAwesome  x000D    content    f00d 00a0   x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   lt link href  https   maxcdn bootstrapcdn com font-awesome 4 7 0 css font-awesome min css  rel  stylesheet   gt  x000D   lt  --FA unicodes here  http   astronautweb co snippet font-awesome -- gt  x000D   lt h4 gt Buttons with text lt  h4 gt  x000D   lt button class  btn cancel btn-default  gt Close lt  button gt  x000D   lt button class  btn add btn-primary  gt Add lt  button gt  x000D   lt button class  btn add btn-success  gt Insert lt  button gt  x000D   lt button class  btn save btn-primary  gt Save lt  button gt  x000D   lt button class  btn save btn-warning  gt Submit Changes lt  button gt  x000D   lt button class  btn cancel btn-link  gt Delete lt  button gt  x000D   lt button class  btn edit btn-info  gt Edit lt  button gt  x000D   lt button class  btn edit btn-danger  gt Modify lt  button gt  x000D   x000D   lt br  gt  x000D   lt br  gt  x000D   lt h4 gt Buttons without text lt  h4 gt  x000D   lt button class  btn edit btn-primary    gt  x000D   lt button class  btn cancel btn-danger    gt  x000D   lt button class  btn add btn-info    gt  x000D   lt button class  btn save btn-success    gt  x000D   lt button class  btn edit btn-link   gt  x000D   lt button class  btn cancel btn-link   gt  x000D   x000D   x000D    Fiddle here

[html] HTML/CSS - Adding an Icon to a button

Examples related to html

Examples related to css