{"id":13791186,"url":"https://github.com/shafayetShafee/bsicons","last_synced_at":"2025-05-12T10:31:24.491Z","repository":{"id":145216787,"uuid":"556347731","full_name":"shafayetShafee/bsicons","owner":"shafayetShafee","description":"Quarto Extension to use Bootstrap Icons in HTML documents and RevealJs presentations","archived":false,"fork":false,"pushed_at":"2023-11-17T09:59:06.000Z","size":3239,"stargazers_count":13,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-04T22:15:23.072Z","etag":null,"topics":["icons","quarto","quarto-extension","quarto-filter","quarto-pub","quartopub"],"latest_commit_sha":null,"homepage":"https://shafayetshafee.github.io/bsicons/example.html","language":"Lua","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shafayetShafee.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":"2022-10-23T16:44:02.000Z","updated_at":"2024-03-30T12:55:08.000Z","dependencies_parsed_at":"2023-11-17T10:54:03.960Z","dependency_job_id":null,"html_url":"https://github.com/shafayetShafee/bsicons","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fbsicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fbsicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fbsicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fbsicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shafayetShafee","download_url":"https://codeload.github.com/shafayetShafee/bsicons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225133721,"owners_count":17426049,"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":["icons","quarto","quarto-extension","quarto-filter","quarto-pub","quartopub"],"created_at":"2024-08-03T22:00:57.058Z","updated_at":"2024-11-18T05:32:06.407Z","avatar_url":"https://github.com/shafayetShafee.png","language":"Lua","funding_links":[],"categories":["Extensions"],"sub_categories":[],"readme":"# Bootstrap Icons Extension For Quarto\n\nThis extension provides support including icons provided by [Bootstrap](https://icons.getbootstrap.com/). Icons can be used in HTML documents only.\n\n## Installing\n\n```bash\nquarto install extension shafayetShafee/bsicons\n```\n\nThis will install the extension under the `_extensions` subdirectory.\nIf you're using version control, you will want to check in this directory.\n\n## Using\n\nTo embed an icon, use the {{\u003c bi \u003e}} shortcode. For example:\n\n```\n{{\u003c bi alarm \u003e}}\n\n{{\u003c bi alarm-fill \u003e}}\n\n{{\u003c bi balloon-heart  size=5em color=#2ecaf9 \u003e}}\n\n{{\u003c bi emoji-sunglasses  size=5em color=#2ecaf9 label=\"Proud Happy Face\" \u003e}}\n\n```\n\nThis extension provides support for over 2,000 bootstrap icons. You can browse all of the available icons here:\n\n[https://icons.getbootstrap.com/#icons](https://icons.getbootstrap.com/#icons)\n\n### icons color\n\nTo specify a color for icons, you can use css [named colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#named_colors) (i.e. `red`, `cornflowerblue` etc), [RGB color model](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb_color_model) or [HSL color model](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl_color_model).\n\nThe complete list of available named color is [here](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color).\n\n```\n{{\u003c bi alarm-fill color=red \u003e}}\n\n{{\u003c bi twitch color=lightseagreen \u003e}}\n\n{{\u003c bi twitter color=cornflowerblue \u003e}}\n\n{{\u003c bi windows color=#E86033 \u003e}}\n\n{{\u003c bi ubuntu color=rgb(232,96,51) \u003e}}\n\n{{\u003c bi terminal-fill color=rgba(232,96,51,1) \u003e}}\n\n{{\u003c bi stars color=hsl(15,80%,56%) \u003e}}\n\n{{\u003c bi spotify color=hsla(15,80%,56%,360) \u003e}}\n```\n\n**Note that, when specifying color with either RGB or HSL model, DO NOT PUT SPACE BETWEEN VALUES. That is, do not write as `rgb(232, 96, 51)`, instead write as `rgb(232,96,51)`, otherwise it will not work.**\n\n### icon sizing\n\nYou can actually use any size in `px`, `em`, `rem`, `vw`, `vh` css units.\n\n```\n{{\u003c bi incognito size=37px \u003e}}\n\n{{\u003c bi person-plus-fill size=3.1rem \u003e}}\n\n{{\u003c bi postcard-heart size=2.7em \u003e}}\n\n{{\u003c bi reddit size=9.8vw \u003e}}\n\n{{\u003c bi slack size=7.6vh \u003e}}\n\n```\n\n### class\n\nIt is also possible to assign css class using `class` argument so that multiple icons can be styled together.\n\n```{css}\n.styled {\n  color: red;\n}\n```\n\n```\n{{\u003c bi windows class=styled \u003e}}\n\n{{\u003c bi ubuntu  class=styled \u003e}}\n\n{{\u003c bi terminal-fill class=styled \u003e}}\n```\n\n### Accessibility\n\nIf the icon is being used in place of some text, just add some descriptive text in the label argument.\n\n```\n{{\u003c bi hand-thumbs-up-fill  size=7em color=cornflowerblue label=\"Thumbs up\" \u003e}}\n```\n\n## Example\n\nHere is the source code for a minimal example: [example.qmd](example.qmd).\n\nThe output of `example.qmd` in [HTML](https://shafayetshafee.github.io/bsicons/example_html.html) format and in [revealjs](https://shafayetshafee.github.io/bsicons/example.html) format.\n\n## Acknowledgement\n\nThe code for this extension is adapted from the [fontawesome](https://github.com/quarto-ext/fontawesome).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Fbsicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FshafayetShafee%2Fbsicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Fbsicons/lists"}