{"id":14972255,"url":"https://github.com/darkseal/bootstrap4-glyphicons","last_synced_at":"2025-07-15T21:46:37.105Z","repository":{"id":139348167,"uuid":"122316405","full_name":"Darkseal/bootstrap4-glyphicons","owner":"Darkseal","description":"How use Glyphicons with Bootstrap 4 (without getting mad)","archived":false,"fork":false,"pushed_at":"2018-07-19T00:04:20.000Z","size":1036,"stargazers_count":40,"open_issues_count":0,"forks_count":74,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-28T15:43:01.312Z","etag":null,"topics":["bootstrap","bootstrap3","bootstrap4","bootstrap4-glyphicons","css","equivalent","font-icons","fontawesome","glyphicons","workaround"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Darkseal.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-21T09:31:40.000Z","updated_at":"2023-04-11T04:06:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"b0e8db78-99b9-46c9-91c0-259e10aace99","html_url":"https://github.com/Darkseal/bootstrap4-glyphicons","commit_stats":{"total_commits":7,"total_committers":4,"mean_commits":1.75,"dds":0.4285714285714286,"last_synced_commit":"f7b1a17bbe64308d1d8b2b4bb2ba8a0ea621b377"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darkseal%2Fbootstrap4-glyphicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darkseal%2Fbootstrap4-glyphicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darkseal%2Fbootstrap4-glyphicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darkseal%2Fbootstrap4-glyphicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Darkseal","download_url":"https://codeload.github.com/Darkseal/bootstrap4-glyphicons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219862312,"owners_count":16555956,"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":["bootstrap","bootstrap3","bootstrap4","bootstrap4-glyphicons","css","equivalent","font-icons","fontawesome","glyphicons","workaround"],"created_at":"2024-09-24T13:46:38.132Z","updated_at":"2024-10-11T06:41:02.949Z","avatar_url":"https://github.com/Darkseal.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# bootstrap4-glyphicons\n\nHow to use Glyphicons with Bootstrap 4 (without getting mad)\n\nFor further info \u0026 samples, read the [official page](https://www.ryadel.com/en/bootstrap-3-glyphicons-halflings-set-bootstrap4-fontawesome/).\n\n## Introduction\n\nIf you stumbled upon this project you most likely already know Bootstrap, the award-winning and worldwide-renown open source toolkit for developing with HTML, CSS, and JS. As a matter of fact, you are probably struggling trying to switch from from Bootstrap 3 to Bootstrap 4. Among the many things that have changed (mostly summarized in the [official Migration guide](http://getbootstrap.com/docs/4.0/migration/)) there was the choice to drop the Glyphicons icon font. \n\nIf you need icons, the Bootstrap team suggest one of the following alternatives:\n\n* the upstream version of [Glyphicons](https://glyphicons.com/)\n* [Octicons](https://octicons.github.com/)\n* [Font Awesome](https://fontawesome.com/)\n* Other alternatives mentioned in the [Extend page](https://getbootstrap.com/docs/4.0/extend/icons/)\n\nIf you're migrating an existing website based on Bootstrap 3, the first option definitely seems the most viable one. However, the Glyphicons Basic set - the one available for free - does not cover all the icons which were available in Bootstrap, which open-source toolkit was granted with the permissions to use the Halflings set (as long as they provide a link and credits info). \n\nNow, since Bootstrap 4 doesn't ship the Halflings set anymore, if you want to use that set you might need to pay: if you don't want to, you are basically forced to migrate from Glyphicons to a viable open-source alternative, such as the aforementioned Octicons and Font Awesome - the latter being personal preference, as its free set is good enough for most projects. However, that will undoubtely require some major HTML code rewrite, because you'll have to perform a manual mapping from something like this:\n\n    \u003cspan class=\"glyphicons glyphicons-home\"\u003e\u003c/span\u003e\n    \u003cspan class=\"glyphicons glyphicons-plus-sign\"\u003e\u003c/span\u003e\n    \u003cspan class=\"glyphicons glyphicons-hand-left\"\u003e\u003c/span\u003e\n\nto something like this (in case of **FontAwesome**):\n\n    \u003cspan class=\"fas fa-home\"\u003e\u003c/span\u003e\n    \u003cspan class=\"fas fa-plus-circle\"\u003e\u003c/span\u003e\n    \u003cspan class=\"fas fa-hand-point-left\"\u003e\u003c/span\u003e\n\n... and so on. Unfortunately, as you might see, the icon names might also be quite different, hence is not possible to search-and-replace them easily.\n\n\n## Alternatives\n\nIf you're building a brand new project, I strongly suggest to drop the Glyphicons package and to migrate to FontAwesome: not only you'll have more icons, but you'll also have the chance to seamlessly switch from Font icons to SVG icons,  which is something that you will hardly ever regret (in case you don't know why, read [here](https://www.ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/)).\n\nHowever, if you're dealing with an existing project which makes an extensive use of the Glyphicons Halflings set, you can install this package containing two viables workaround.\n\n## Installing\n\nThis package can be used in two alternative ways: **Bootstrap 4+3** and **FontAwesome Mapping**.\n\n\n### Method #1: Bootstrap 4+3\n\nThis workaround leverages the fact that you can still use Bootstrap 3.x **in addition** to Bootstrap 4 without any issue of sort, as long as you only get only the \"glyphicon part\". You won't have any license issues, since you'll be actually using Bootstrap 3. \n\nTo implement this workaround, install the package into your web site and add the following within the `\u003chead\u003e` element:\n\n    \u003clink href=\"/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\nThat's it.\n\n\n### Method #2: FontAwesome Mapping\n\nSince any Glyphicon image has (more or less) their FontAwesome equivalent, we can map the various `glyphycons*` css classes to their `fa*` equivalent. This is the purpose of the file you can find in `/maps/glyphicons-fontawesome.less` , which will act as a transparent mapping bridge between **Glyphicon** and **FontAwesome**. \n\nTo implement this workaround, install the package into your web site and add the following within the `\u003chead\u003e` element:\n\n    \u003clink href=\"/bootstrap4-glyphicons/maps/glyphicons-fontawesome.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\nThe only caveat here is that you'll have to use the font-based icons instead of the SVG alternative (see above), but if you're a Glyphicon user you won't suffer from that: there's a much higher chance that you won't like the \"new\" icons... If you feel like that, just implement the **Bootstrap 4+3** alternative instead.\n\n\n## Authors\n\n* [Darkseal](https://github.com/Darkseal)\n\n\n## License\n\nThis project is licensed under the APACHE 2.0 License - see the [LICENSE.md](LICENSE.md) file for details\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkseal%2Fbootstrap4-glyphicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarkseal%2Fbootstrap4-glyphicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarkseal%2Fbootstrap4-glyphicons/lists"}