Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Mottie/input-password-bullet
How to replace the input password bullet in most browsers
https://github.com/Mottie/input-password-bullet
font how-to password password-bullet
Last synced: 3 months ago
JSON representation
How to replace the input password bullet in most browsers
- Host: GitHub
- URL: https://github.com/Mottie/input-password-bullet
- Owner: Mottie
- License: other
- Created: 2015-09-02T13:16:11.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-10-23T06:01:02.000Z (about 6 years ago)
- Last Synced: 2024-07-27T16:46:29.947Z (3 months ago)
- Topics: font, how-to, password, password-bullet
- Language: CSS
- Homepage: https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa
- Size: 114 KB
- Stars: 86
- Watchers: 4
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](http://fontello.com/), 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 `0000` will change depending on the glyph & glyph destination)
```css
/* 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;
}
```
* [Check out the demo](https://mottie.github.io/input-password-bullet/)
