HTML/CSS - Adding an Icon to a button

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

4 Answers

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

<div><span></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.

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

button.btn.add::before { font-family: fontAwesome; content: "\f067\00a0";
}
button.btn.edit::before { font-family: fontAwesome; content: "\f044\00a0";
}
button.btn.save::before { font-family: fontAwesome; content: "\f00c\00a0";
}
button.btn.cancel::before { font-family: fontAwesome; content: "\f00d\00a0";
}

<script src=""></script>
<script src=""></script>
<link href="" rel="stylesheet"/>
<link href="" rel="stylesheet"/>
<!--FA unicodes here:
<h4>Buttons with text</h4>
<button>Close</button>
<button>Add</button>
<button>Insert</button>
<button>Save</button>
<button>Submit Changes</button>
<button>Delete</button>
<button>Edit</button>
<button>Modify</button>
<br/>
<br/>
<h4>Buttons without text</h4>
<button />
<button />
<button />
<button />
<button/>
<button/>

Fiddle here.

<a href="#">Test</a>
.btnTest{ background:url('images/icon.png') no-repeat left center; padding-left:20px;
} 

Simplest button with emoji icon

button { line-height: 25px;
}
button::before { content: "🔎 ";
}

<button>Search</button>