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

Crimson

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_3062525 · Answer

Simplest button with emoji icon

button {
  line-height: 25px;
}

button::before {
  content: " ";
}

user_9993059 · Answer

You can easily do that with font awesome,

link the font awesome kit to your site's head,

then follow this method:

button {
  font-size: 1.5em;
  margin: 5px;
  Background-color: royalblue;
  color: white;
  border: 1px solid royalblue;
  border-radius:5px;
}

/button html/

HTML/CSS - Adding an Icon to a button

5 Answers