Set the Icon of Callout Block

[RoyiAvital]

It would be great to have control over the callout block.

If not, at least add a callout with question mark to allow questions in the context of presentation for teaching.

[mcanouil]

Set icon to false and use any of the Quarto shortcodes extensions to add a new icon using level 2 header inside the callout.

::: {.callout-note icon=false}

## {{< iconify fa6-brands fa-circle-question >}} Question

Using callouts is an effective way to highlight content that your reader give special consideration or attention.

:::

[turcotte]

Do you know why the Font Awesome right quote does not appear in the first example below, but it does in the second? My main concern is how to make the right quote display correctly in the first example.

::: {.callout-note icon=false}
## {{< fa quote-right >}}

Some text.

:::

::: {.callout-note icon=false}
## {{< fa quote-right >}} Citation

Some text.

:::

[cscheid]

That's happening because Quarto attempts to detect an empty title to replace it with the placeholder title ("Note" in your case). Because the icon shortcode doesn't produce any text, Quarto thinks it's an empty title. That's a bug we need to fix.

In the meantime, though, you can use the following:

::: {.callout-note icon=false}
## {{< fa quote-right >}} &nbsp;

Some text.

:::

[cscheid]

Tracking the bug here #9701

[turcotte]

Thank you for the prompt response and solution!

[jimjam-slam]

If you don't want to install an extension, you could also use something like this to use a Bootstrap icon (which is the set used for navbars):

`<i class="bi bi-exclamation-diamond-fill"></i>`{=html}

I believe Bootstrap icons are loaded with Quarto so long as you don't use theme: none (although if you do, you can still manually load the icon CSS back with format.html.css).

[nichtich]

It's a bit tricky but you can replace the icon with an SVG (e.g. from Boostrap Icons) via CSS, e.g.

div.callout-note:not(.callout-titled) .callout-icon::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%232373cc" class="bi bi-arrow-right-circle" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/></svg>');
}

A simple configuration key such as callout-note-icon: arrow-right-circle would be much more convenient.

[mcanouil]

The icon option in (custom) call-outs already controls Bootstrap Icons.

• https://quarto.org/docs/prerelease/1.3/custom-ast-nodes/callout.html

[nichtich]

Thanks! This seems pretty new and requires a custom lua filter. A minimal filter code to change the icon of a selected callout type would fully answer this question.

[mcanouil]

See extensions such as https://github.com/coatless-quarto/custom-callout