input password bullet

Modification de la balle de mot de passe d'entrée

Ce dépôt fournit des instructions et une démonstration simple montrant comment remplacer la balle de mot de passe d'entrée dans la plupart des navigateurs.

• Allez sur Fontello ou site équivalent.

• Choisissez ou téléchargez une icône.

  

• Sélectionnez l'onglet "Personnaliser les codes".

• Modifiez la destination des glyphes en U + "2022" pour remplacer le symbole de balle dans les navigateurs WebKit.

• Changez la destination du glyphe en U + "25cf" pour remplacer le symbole de la balle dans Firefox & MS Edge.

  

• Téléchargez webfont.

• Incluez les fichiers de police sur votre site et incluez le CSS suivant (note, le 0000 changera en fonction de la destination Glyph et glyphe)

 /* Use the css below to change the password input symbol */
@font-face {
	font-family : 'fontello' ;
	src : url ( './font/fontello.eot?0000' );
	src : url ( './font/fontello.eot?0000#iefix' ) format ( 'embedded-opentype' ) ,
	     url ( './font/fontello.woff2?0000' ) format ( 'woff2' ) ,
	     url ( './font/fontello.woff?0000' ) format ( 'woff' ) ,
	     url ( './font/fontello.ttf?0000' ) format ( 'truetype' ) ,
	     url ( './font/fontello.svg?0000#fontello' ) format ( 'svg' );
	font-weight : normal;
	font-style : normal;
}

input [ type = "password" ] {
	font-family : "fontello" ;
	font-style : normal;
	font-weight : normal;
	speak : none;

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant : normal;
	text-transform : none;

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing : grayscale;
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

	/* add spacing to better separate each image */
	letter-spacing : 2 px ;
}

• Découvrez la démo