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>