Changing the input password bullet
This repo provides instructions & a simple demo showing how to replace the input password bullet in most browsers.
-
Go to Fontello, or equivalent site.
-
Choose or upload an icon.
-
Select "Customize Codes" tab.
-
Change the glyph destination to U+"2022" to replace the bullet symbol in webkit browsers.
-
Change the glyph destination to U+"25CF" to replace the bullet symbol in Firefox & MS Edge.
-
Download webfont.
-
Include the font files on your site, and include the following css (Note, the
0000will 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.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: 2px;
}
