From c6e9ac80c38be47da14bc83ac20a52ca92bc6a11 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Thu, 2 Jan 2025 15:11:19 +0100 Subject: [PATCH] added more icons --- book/basic-features/badges.md | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) diff --git a/book/basic-features/badges.md b/book/basic-features/badges.md index 7b18f99..2f6ea31 100644 --- a/book/basic-features/badges.md +++ b/book/basic-features/badges.md @@ -131,20 +131,29 @@ Here the Jupyter-book logo was inserted for a more professional look. It's inclu A library of SVG icons can be found in the [Bootstrap](https://icons.getbootstrap.com/#icons) library. -By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: - - icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. - +By scrolling through the available icons in the library you can find just about any icon. Once selected, you need to copy the SVG of the icon to include it in the `path` in the HTML code. This paragraph includes a globe: . As you can see in the code cell below, you'll need to specify the width, height as well as fill colour. ``` - -This paragraph includes a globe: - - " icon. - + + + ``` -**3. Combining Buttons and Icons** +**3. GitHub Octicon Icons** +[GitHub icons](https://primer.style/foundations/icons) like {octicon}`mark-github` can be added using the syntax: +```{octicon}`mark-github` ``` + +Where `mark-github` can be replaced by any of the name of the icon provided [here](https://primer.style/foundations/icons) + +By default the icon will be of height 1em (i.e. the height of the font). + +**4. Material Design Icons** +The use of Material Design Icons like {material-regular}`settings` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#material-design-icons) + +**5. FontAwesome Icons** +The use of FontAwesome Icons like {fas}`spinner` is explained [here](https://sphinx-design.readthedocs.io/en/latest/badges_buttons.html#fontawesome-icons) + +**6. Combining Buttons and Icons** Icons can also be included within buttons using the icon font for a modern, professional look. The code can also be downloaded in the [Bootstrap](https://icons.getbootstrap.com/#icons) library.