adding icon to link/button - css

Question

I currently have a link and I'm using it as a button look to it and I would like to add an icon to it.
Example: a plus sign + icon next to a word that will say Add User. Here is my link:
<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'>Cancel</a>
Here is my .glossyBtn style:
.glossyBtn
{
display: inline-block;
background-color: #c1e2f4;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #b1daf1);
background-image: -moz-linear-gradient(top, #eeeeee, #b1daf1);
background-image: -ms-linear-gradient(top, #eeeeee, #b1daf1);
background-image: -o-linear-gradient(top, #eeeeee, #b1daf1);
background-image: linear-gradient(top, #eeeeee, #b1daf1);
border: 1px solid #3e95c8;
border-bottom: 1px solid #3e95c8 !Important;
border-radius: 3px;
color: #046fad !Important;
font: bold 12px Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 5px 12px;
text-align: center;
text-shadow: 0 1px 0 #eee;
text-decoration: none;
cursor: pointer;
list-style: none;
float: left;
margin-top: 5px;
margin-right: 5px;
}
Live demo: Tinkerbin

Answer 1

I haven't tested this, but the following should work with proper positioning:
<a class="glossyBtn" href='<%:Url.Action("Edit", "Case", new{caseId = Model}) %>'><span><img src="plus.png" alt=""></span>Cancel</a>
By prefixing the text with a <span> containing an <img>, you can insure the image stays inline with the text on the right.

Answer 2

Use the :after pseudo-selector:
.glossyBtn:after {
content: '+';
padding-left: 5px;
}
Live demo: Tinkerbin
If you want to add the plus character before the text, use :before pseudo-selector:
.glossyBtn:before {
content: '+';
padding-right: 5px;
}
Live demo: Tinkerbin
I've added padding left/right, to make some space between the text and the plus character.