{"id":13609579,"url":"https://github.com/Mottie/input-password-bullet","last_synced_at":"2025-04-12T20:32:05.911Z","repository":{"id":137828953,"uuid":"41801949","full_name":"Mottie/input-password-bullet","owner":"Mottie","description":"How to replace the input password bullet in most browsers","archived":false,"fork":false,"pushed_at":"2018-10-23T06:01:02.000Z","size":117,"stargazers_count":93,"open_issues_count":0,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-03T00:11:27.483Z","etag":null,"topics":["font","how-to","password","password-bullet"],"latest_commit_sha":null,"homepage":"https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mottie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-09-02T13:16:11.000Z","updated_at":"2024-12-17T06:03:42.000Z","dependencies_parsed_at":"2024-01-19T10:13:13.200Z","dependency_job_id":"dd6064d2-2bd6-4133-9940-e7bd8a1853c1","html_url":"https://github.com/Mottie/input-password-bullet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mottie%2Finput-password-bullet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mottie%2Finput-password-bullet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mottie%2Finput-password-bullet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mottie%2Finput-password-bullet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mottie","download_url":"https://codeload.github.com/Mottie/input-password-bullet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248629820,"owners_count":21136322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["font","how-to","password","password-bullet"],"created_at":"2024-08-01T19:01:36.152Z","updated_at":"2025-04-12T20:32:05.497Z","avatar_url":"https://github.com/Mottie.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Changing the input password bullet\n\n### This repo provides instructions \u0026 a simple demo showing how to replace the input password bullet in most browsers.\n\n* Go to [Fontello](http://fontello.com/), or equivalent site.\n* Choose or upload an icon.\n\n    ![fontello-select-glyph](images/Fontello-select-glyphs.png)\n\n* Select \"Customize Codes\" tab.\n* Change the glyph destination to U+\"2022\" to replace the bullet symbol in webkit browsers.\n* Change the glyph destination to U+\"25CF\" to replace the bullet symbol in Firefox \u0026 MS Edge.\n\n    ![fontello-customize-code](images/Fontello-customize-code.png)\n\n* Download webfont.\n* Include the font files on your site, and include the following css (Note, the `0000` will change depending on the glyph \u0026 glyph destination)\n\n```css\n/* Use the css below to change the password input symbol */\n@font-face {\n\tfont-family: 'fontello';\n\tsrc: url('./font/fontello.eot?0000');\n\tsrc: url('./font/fontello.eot?0000#iefix') format('embedded-opentype'),\n\t     url('./font/fontello.woff2?0000') format('woff2'),\n\t     url('./font/fontello.woff?0000') format('woff'),\n\t     url('./font/fontello.ttf?0000') format('truetype'),\n\t     url('./font/fontello.svg?0000#fontello') format('svg');\n\tfont-weight: normal;\n\tfont-style: normal;\n}\n\ninput[type=\"password\"] {\n\tfont-family: \"fontello\";\n\tfont-style: normal;\n\tfont-weight: normal;\n\tspeak: none;\n\n\t/* For safety - reset parent styles, that can break glyph codes*/\n\tfont-variant: normal;\n\ttext-transform: none;\n\n\t/* Font smoothing. That was taken from TWBS */\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n\t/* Uncomment for 3D effect */\n\t/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */\n\n\t/* add spacing to better separate each image */\n\tletter-spacing: 2px;\n}\n```\n\n* [Check out the demo](https://mottie.github.io/input-password-bullet/)\n\n    ![password-typing-chrome](images/password-typing-chrome.gif)\n    ![password-typing-firefox](images/password-typing-firefox.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMottie%2Finput-password-bullet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMottie%2Finput-password-bullet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMottie%2Finput-password-bullet/lists"}