mirror of
https://github.com/TeachBooks/manual.git
synced 2026-11-12 22:35:51 +00:00
final?
This commit is contained in:
Julie Kirsch
parent
05ccb185c3
commit
3ab43cd2f0
1 changed files with 44 additions and 11 deletions
|
|
@ -43,10 +43,22 @@ The basic code syntax for creating a button is as follows:
|
|||
:color: primary
|
||||
```
|
||||
|
||||
```
|
||||
```{button-link} https://teachbooks.io
|
||||
:color: primary
|
||||
```
|
||||
```
|
||||
|
||||
```{button-ref} ../features/overview.md
|
||||
:color: primary
|
||||
:color: secondary
|
||||
```
|
||||
|
||||
```
|
||||
```{button-ref} ../features/overview.md
|
||||
:color: secondary
|
||||
```
|
||||
```
|
||||
|
||||
Buttons can be customized in markdown in a similar way as figures. You can experiment with these styles to create buttons that align with your book's theme. Here are the set of parameters which can be customized:
|
||||
|
||||
|
||||
|
|
@ -65,29 +77,50 @@ Buttons can be customized in markdown in a similar way as figures. You can exper
|
|||
Finally here are some examples:
|
||||
|
||||
```{button-link} https://teachbooks.io
|
||||
TeachBooks
|
||||
:color: warning
|
||||
:shadow:
|
||||
|
||||
TeachBooks
|
||||
```
|
||||
|
||||
```
|
||||
```{button-link} https://teachbooks.io
|
||||
:color: warning
|
||||
:shadow:
|
||||
|
||||
TeachBooks
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
```{button-link} https://teachbooks.io
|
||||
TeachBooks
|
||||
:color: success
|
||||
:outline:
|
||||
:expand:
|
||||
|
||||
TeachBooks
|
||||
```
|
||||
|
||||
```
|
||||
```{button-link} https://teachbooks.io
|
||||
:color: success
|
||||
:outline:
|
||||
:expand:
|
||||
|
||||
TeachBooks
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
## Icons
|
||||
|
||||
Icons can be included to visually represent actions or categories. They can take many shapes, such as an image or button inserted in-line within a text paragraph. Icons can be integrated using HTML syntax.
|
||||
|
||||
To add an icon, use the following syntax:
|
||||
|
||||
**Image Icons**
|
||||
**1. Image Icons**
|
||||
|
||||
Let's have a look at the first sentence of this chapter again.
|
||||
|
||||
<a href="https://jupyterbook.org/"><img style="display:inline-block; height:1.5em; width:auto; transform:translate(0, -0.15em)" src="../images/logo-wide.svg" alt="Jupyter book"></a> provides a range of features which are visually appealing and functional.
|
||||
Let's have a look at the first sentence of this chapter again: <a href="https://jupyterbook.org/"><img style="display:inline-block; height:1.5em; width:auto; transform:translate(0, -0.15em)" src="../images/logo-wide.svg" alt="Jupyter book"></a> provides a range of features which are visually appealing and functional.
|
||||
|
||||
Here the Jupyter-book logo was inserted for a more professional look. It's including a link `href` and and image saved as `../images/logo-wide.svg`
|
||||
|
||||
|
|
@ -95,13 +128,13 @@ Here the Jupyter-book logo was inserted for a more professional look. It's inclu
|
|||
<a href="https://jupyterbook.org/"><img style="display:inline-block; height:1.5em; width:auto; transform:translate(0, -0.15em)" src="../images/logo-wide.svg" alt="Jupyter book"></a> provides a range of features which are visually appealing and functional.
|
||||
```
|
||||
|
||||
**SVG Icons**
|
||||
**2. SVG Icons**
|
||||
|
||||
A library of SVG icons can be found [here](https://icons.getbootstrap.com/#icons).
|
||||
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: <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16">
|
||||
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
|
||||
</svg> " icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour.
|
||||
</svg> icon. As you can see in the code cell below, you'll need to specify the width, height as well as fill colour.
|
||||
|
||||
|
||||
```
|
||||
|
|
@ -112,7 +145,7 @@ This paragraph includes a globe: <svg xmlns="http://www.w3.org/2000/svg" width="
|
|||
|
||||
```
|
||||
|
||||
**Combining Buttons and Icons**
|
||||
**3. 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.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue