https://github.com/shafayetShafee/bsicons

Quarto Extension to use Bootstrap Icons in HTML documents and RevealJs presentations
https://github.com/shafayetShafee/bsicons

icons quarto quarto-extension quarto-filter quarto-pub quartopub

Last synced: 3 months ago
JSON representation

Quarto Extension to use Bootstrap Icons in HTML documents and RevealJs presentations

• Host: GitHub
• URL: https://github.com/shafayetShafee/bsicons
• Owner: shafayetShafee
• License: mit
• Created: 2022-10-23T16:44:02.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-17T09:59:06.000Z (about 1 year ago)
• Last Synced: 2024-08-04T22:15:23.072Z (6 months ago)
• Topics: icons, quarto, quarto-extension, quarto-filter, quarto-pub, quartopub
• Language: Lua
• Homepage: https://shafayetshafee.github.io/bsicons/example.html
• Size: 3.09 MB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bootstrap Icons Extension For Quarto

This extension provides support including icons provided by [Bootstrap](https://icons.getbootstrap.com/). Icons can be used in HTML documents only.

## Installing

```bash

quarto install extension shafayetShafee/bsicons

```

This will install the extension under the `_extensions` subdirectory.

If you're using version control, you will want to check in this directory.

## Using

To embed an icon, use the {{< bi >}} shortcode. For example:

```

{{< bi alarm >}}

{{< bi alarm-fill >}}

{{< bi balloon-heart  size=5em color=#2ecaf9 >}}

{{< bi emoji-sunglasses  size=5em color=#2ecaf9 label="Proud Happy Face" >}}

```

This extension provides support for over 2,000 bootstrap icons. You can browse all of the available icons here:

[https://icons.getbootstrap.com/#icons](https://icons.getbootstrap.com/#icons)

### icons color

To 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).

The complete list of available named color is [here](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color).

```

{{< bi alarm-fill color=red >}}

{{< bi twitch color=lightseagreen >}}

{{< bi twitter color=cornflowerblue >}}

{{< bi windows color=#E86033 >}}

{{< bi ubuntu color=rgb(232,96,51) >}}

{{< bi terminal-fill color=rgba(232,96,51,1) >}}

{{< bi stars color=hsl(15,80%,56%) >}}

{{< bi spotify color=hsla(15,80%,56%,360) >}}

```

**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.**

### icon sizing

You can actually use any size in `px`, `em`, `rem`, `vw`, `vh` css units.

```

{{< bi incognito size=37px >}}

{{< bi person-plus-fill size=3.1rem >}}

{{< bi postcard-heart size=2.7em >}}

{{< bi reddit size=9.8vw >}}

{{< bi slack size=7.6vh >}}

```

### class

It is also possible to assign css class using `class` argument so that multiple icons can be styled together.

```{css}

.styled {

  color: red;

}

```

```

{{< bi windows class=styled >}}

{{< bi ubuntu  class=styled >}}

{{< bi terminal-fill class=styled >}}

```

### Accessibility

If the icon is being used in place of some text, just add some descriptive text in the label argument.

```

{{< bi hand-thumbs-up-fill  size=7em color=cornflowerblue label="Thumbs up" >}}

```

## Example

Here is the source code for a minimal example: [example.qmd](example.qmd).

The 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.

## Acknowledgement

The code for this extension is adapted from the [fontawesome](https://github.com/quarto-ext/fontawesome).