HTML CSS - Adding an Icon to a button

Question

I made some CSS buttons and I want to add an icon before the text, "Button Text".

But I don't know how I should do this...

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

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;}

Answer 1

Here's what you can do using font-awesome library.

Add an icon library, such as font awesome, and append icons to HTML buttons:

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.flaticon.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Add font awesome icons to buttons  -->
<p>Icon buttons:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>

<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

---

Step 2) 

Add CSS:

/* Style buttons */
.btn {
  background-color: DodgerBlue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}