CSS3 Icon: inserted content isn't placed consistently - html

Question

I'm creating icons using only CSS3. So far so good, but I've run into a problem with the simplest one.
I just want to have an "!" centered in a circle, but its position isn't consistent. Sometimes it's a pixel higher, a pixel to the left, or both.
I have no idea what's causing this.
Here's a fiddle.
.nos {
position: relative;
height: 12px; width: 12px;
border: 2px solid #e04006;
border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
display: block;
color: #e04006;
overflow: hidden;
cursor: default;
}
.nos:hover {
overflow: visible;
}
.nos span {
position: absolute;
padding-left: 18px;
display: block;
font-size: 14px; line-height: 16px; text-decoration: underline;
white-space: nowrap;
}
.nos:before {
content: '\21';
position: absolute; top: 0; bottom: 0; left: 0; right: 0;
margin: 0;
height: 16px; width: 16px;
display: block;
font-family: "Lucida Console", Monaco, monospace; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold;
}

Answer 1

Remove the height: 16px; width: 16px; from .nos:before
Update Fiddle

Answer 2

Looks like I managed to fix it after some tinkering. Not sure what did the trick.
.nos {
position: relative;
width: 12px; height: 12px;
border: 2px solid #e04006;
-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
display: inline-block;
color: #e04006;
overflow: hidden;
cursor: default;
}
.nos:hover {
overflow: visible;
}
.nos span {
position: absolute; top: -2px; left: -2px;
height: 16px;
padding-left: 18px;
display: block;
text-decoration: underline; font-size: 14px; line-height: 16px;
white-space: nowrap;
}
.nos:before {
content: '\21';
position: absolute; top: -2px; left: -2px;
width: 16px;
display: block;
font-family: Verdana, Geneva, sans-serif; text-align: center; font-weight: bold; font-size: 13px; line-height: 13px;
}
Fiddle