Genericons werden auf Chrome und FF unterschiedlich angezeigt

[Quabbe]

Hallo Leute,

ich habe folgendes Problem: im Chrome sieht mein Info-Icon so aus wie es aussehen soll. Im Firefox klebt das Icon dagegen unschön am rechten Rand. Hier ein Bild:


Liegt das an der verwendeten Genericon-Font? Oder daran, dass ich die Buchstaben mittels <span> einbinde?

HTML:
<button class="info genericon genericon-info"></button>

CSS:
.info {
    margin:10px 0;
    line-height:20px;
    height:20px;
    display:inline-block;
    border-radius:20px;
    box-shadow:1px 2px 2px #BCC8CC;
    width:20px;
    padding:0;
    text-align:center;
    cursor:pointer;
    font-size:20px;
    color:#91cce2;
    background:transparent;
}

Gruß,
ein ratloser Quabbe

 

[nookie]

Versuchs mal mit FontAwesome .

Dein Konstrukt sollte eher so aussehen.

<a href="#" title="info"><i class="fa fa-info"></i></a>