Icône fond de police sur hover

En bas de mon site http://www.stefaanoyen.be (colonne de gauche) J'ai des icônes de médias sociaux qui sont une police d'icône. En vol stationnaire, je veux que les cercles soient rouges et les icônes blanches. Les cercles rouges fonctionnent, mais il y a un carré blanc derrière eux. Comment limiter le blanc à la forme des icônes/cercles?Icône fond de police sur hover

Ceci est mon HTLM:

<p class="share"><a href="#">l</a> <a href="#">i</a> <a href="#">g</a> <a href="#">f</a></p>

Et ceci est mon CSS:

.share a { 
color: #ececec; 
text-decoration: none; 
font: 50px 'socialicoregular', Helvetica, sans-serif; 
} 

.share:hover { 
cursor: pointer; 
} 

.share a:hover { 
color: #B61618; 
text-decoration: none; 
font: 50px 'socialicoregular', Helvetica, sans-serif; 
background-color: #fff; 
}

Merci beaucoup pour votre aide!

Stefaan

Source

2013-03-27 Stefaan

La "forme des icônes/cercles" est en fait un rectangle. Vous définissez le fond blanc sur le lien. Le lien est un rectangle. Vous ne pourrez pas directement définir le style d'une police ou d'un caractère.

Étant donné que vos icônes sont tous arrondis, voici un petit truc que vous pouvez utiliser:

border-radius: 50px;

C'est tout simplement un chiffre deviné. Cela ne veut pas dire que c'est la bonne. Trouvez simplement celui dont vous avez besoin qui correspond à la hauteur/largeur de vos icônes. (Vous devrez peut-être également utiliser votre hauteur de ligne pour vous assurer que votre police est centrée ou au moins verticalement centrée.)

Source

2013-03-27 14:02:08 isotrope

.. bien sûr, cela ne fonctionnera pas dans les navigateurs qui ne supportent pas border-radius: http://caniuse.com/#feat=border-radius – isotrope

Ou, vous pouvez utiliser 'border-radius: 50 % ':) – Terry

Encore mieux. Merci, @Terry – isotrope

Il n'y a pas de solution simple pour celle-ci car vous utilisez uniquement une police. Vous pouvez essayer d'ajouter un border-radius (votre font-size est réglé sur 50px donc le rayon de 25px le fera probablement mais vous devrez jouer avec) à l'élément .share a:hover.

Source

2013-03-27 14:03:07 SKeurentjes

Merci! J'ai implémenté ceci, mais il montre toujours un bord blanc autour du cercle rouge ... Essayé avec 'background-size: 25px 25px' mais ça n'a rien fait. Des idées? – Stefaan

Peut-être que vous pouvez utiliser 'background-image' (une largeur de cercle blanc les bonnes dimensions) sur' .share a: hover' – SKeurentjes

Icône fond de police sur hover

Répondre

Questions connexes