Remplacer le texte par une image

Bien qu’il existe de nombreuses techniques permettant de remplacer un texte par une image en CSS, nous vous proposons une méthode qui n’a jamais fait défaut.

Sans plus tarder, voici le code et les explications y afférentes :

Concernant les explications, les voici :

Pour commencer, il faut définir un type « inline-block » sur l’élément. On pourra également utiliser le « display:block » qui fonctionne correctement bien, mais nous avons souvent besoin du « display:inline-block ».

Ensuite, on donne la taille de l’image interne que l’on disposera en background.

Concernant le « text-indent », celui-ci permettra le décalage du texte loin sur la gauche. Ce qui est assuré avec le « text-align:left ». Avec le « white-space:nowrap », il est assuré qu’aucun retour à la ligne n’est effectué.

Pour le « overflow:hidden », cette propriété permettra au texte d’être visible sur la gauche dans le cas où celui-ci serait trop long.

Nous avons conscience que la technique proposée est assez lourde. Toutefois, son principal avantage reste sur le fait que celle-ci ne nous a jamais lâchées jusqu’à présent.

Répondre