How to replace the input password bullet in Webkit browsers
Switch branches/tags
Nothing to show
Clone or download
Latest commit 8e1f11f Sep 2, 2015
Permalink
Failed to load latest commit information.
css initial commit Sep 2, 2015
font initial commit Sep 2, 2015
images Add animated gif Sep 2, 2015
.gitattributes initial commit Sep 2, 2015
.gitignore initial commit Sep 2, 2015
LICENSE.txt initial commit Sep 2, 2015
README.md Add animated gif Sep 2, 2015
index.html initial commit Sep 2, 2015

README.md

Changing the input password bullet

This repo provides instructions & a simple demo showing how to replace the input password bullet in Webkit browsers.

  • Go to Fontello, or equivalent site.

  • Choose or upload an icon.

    fontello-select-glyph

  • Select "Customize Codes" tab.

  • Change the glyph destination to U+"2022" to replace the bullet symbol.

    fontello-customize-code

  • Download webfont.

  • Include the font files on your site, and include the following css (Note, the 0000 will change depending on the glyph & glyph destination)

/* 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.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: 2px;
}