Probleme de placement picto dans liens

Bonjour à tous,

je viens vers vous car je suis en train de m'arracher les cheveux devant mon ecran !
A la base un problème vraiment tout con, mais la je comprend vraiment pas, j'ai besoin de vos lumières !

voila le souci, j'intègre un site en html/css avec bootstrap.
j'ai sur ma page d'accueil plusieurs lien à passer qui renvoi vers des pages du site. les liens sont simples, une balise <a> contenant le nom (genre "en savoir plus") ET sur la droite de ce bloc <a>,un picto (de font awsome), représentant le signe plus, qui à l'air de rien comme ca mais qui me fait GALERER !

voici a quoi ressemble le lien visuellement :


voici le code de mon lien :

<a href="#" class="btn_plus btn btn-default maj">lire la suite
     <i class="fa fa-2x fa-plus"></i>
</a>

et le css correpondant :

.btn {
    text-transform: uppercase;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 5px 20px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.btn-default {
    color: #fff;
    background-color: #e30066;
    border: 0;
    font-weight: 700;
    right: 15px;
}
.btn_plus {
    position: relative;
}
.btn_plus:hover {
    color: #000;
}
.btn_plus > i {
    position: absolute;
    width: 30px;
    height: 30px;
    color: #fff;
    background: #e30066;
    padding-top: 2px;
    top: 0;
    right: -34px;
}
.btn_plus:hover i.fa.fa-plus{
    color: #000!important;
    background: #fff!important;
}

le lien <a> est en positon relative, car je met le <i> contenant le picto en position absolute pour le placer comme je veux.

Mon problème, ou plutôt mes deux problème ! :

1/ je précise que j'ai copier/coller ce bloc de code partout où est demandé ce lien. le 1er souci est que sur la même page, mon picto ne se positionne pas exactement à la même place, j'ai un décalage sur mon padding-top de 1px. En fait en regardant de plus près je remarque que selon les liens, le picto est pas toujours collé en haut du bloc (écart de 1px). quel est votre avis sur ce problème ? vos solutions ?

2/ j'ai exactement le même problème de décalage de 1px du picto cette fois mais sur le même lien lorsque je change de taille en responsive design : je m'explique, mon picto qui en taille large est correctement placé comme je souhaite, je passe mon navigateur en taille medium (MD sous bootstrap) et bim, il prend un décalage de 1px sur son padding-top toujours! haaaaaaaaa (oui je craque). et pire ! lorsque je le passe en XS, il revient à la bonne position sans le décalage !
et ça varie selon les liens de la page!

bref, ca me parait vraiment bizarre tout ca, ya pas de logique (du moins j'ai pas trouver )

Donc si vous avez des pistes, solutions ou autres, je suis preneur, voir même dispo pour un skype si quelqu'un veut une demo live.

Merci à tous
Modifié par fabiolm (24 Jun 2015 - 22:55)