Add a custom icon from the local drive to the navbar.

[dalmijn]

Description

It's maybe a bit of a silly question, but how could I set an icon in the navbar that is based on an image (e.g. .svg) from the local drive.

So for example this is easily done for a github link:

  navbar:
    right:
     - icon: github
       href: <some link to github>

But if I cannot get it to work with a local image, for instance:
(This wont show any image, but will leave something to click on in the navbar)

  navbar:
    right:
     - icon: _static/<some local image>.svg
       href: <some link to somewhere>

I'm wondering if this is possible and whether I'm missing something.
It's most likely that I just don't know...

Running on quarto 1.3.450 (stable release from the website).
(fontawesome extension is ofcourse installed.)

Thanks in advance!

[cderv]

I believe this fields only support Bootstrap icons as documented: https://quarto.org/docs/reference/projects/websites.html#nav-items

Name of bootstrap icon (e.g. github, twitter, share) See https://icons.getbootstrap.com/ for a list of available icons

@dragonstyle any plans of making custom icons available ?

[mcanouil]

You can use the 'text' key wich supports markdown, thus anything you want.

[cderv]

Awesome ! Thanks @mcanouil !

[mcanouil]

Side note: there are few places where the key does not support markdown such as in 'tools' (an issue is opened)

[dalmijn]

@mcanouil and @cderv, thanks for the quick responses, I'll try it out and I'll get back to you.

[EllaKaye]

Hello! As per the suggestion above, I'm trying this:

  navbar:
    right:
      - text: ![](images/posts.png)
        href: posts.qmd

but I'm getting the error ERROR: YAMLException: tag suffix cannot contain flow indicator characters (_quarto.yml, 9:36). Is there a way to use an image in this way? I've also tried with a .svg file, but go the same error.

[mcanouil]

Did you try using double quotes around your text for text?

[EllaKaye]

Ah, yes, that's it @mcanouil. I had tried quotes around the file name, but not around the entire chunk of text. The latter works, i.e.

  navbar:
    right:
      - text: "![](images/posts.png)"
        href: posts.qmd

Thanks for your prompt and helpful reply (as ever!)

[dalmijn]

@mcanouil, terribly sorry for not having responded afterwards. Ill mark this as the awnser. Thanks you!

[astrowonk]

I had to tweak this to get it work. Initially, markdown pointing to an SVG showed nothing (though the SVG was loading successfully in devtools). I converted the SVG to PNG and that .. sortof worked except the image was gigantic. The YAML below worked for both SVG and PNG: specifying the height:

  navbar:
    right:
    - text: "![](bluesky-brands-solid.svg){height=1em}"
      href: https://github.com/astrowonk
    - text: "![](bluesky-brands-solid.png){height=1em}"
      href: https://bsky.app

I had initially solved my specific issue by installing the excellent Fontawesome extension which has a Bluesky brand icon. (Then the solution is just "{{< fa brands bluesky >}}").

Using an image via markdown as above also works, but it doesn't get mouse-over color changes like a BI or FA icon. (The Bluesky icon should come to Bootstrap some day).

[mcanouil]

That's likely because the SVG does not have any dimensions.
The SVG was there, you simply did not see it but take another look at the code, you will see it's there (using inspect in your favourite browser).

I had initially solved my specific issue by installing the excellent Fontawesome extension which has a Bluesky brand icon. The image also works, but it doesn't get mouse-over color changes like a BI or FA icon.

The hover effect does not come from the image.

Bluesky icon is already in Font Awesome.

1. quarto add mcanouil/quarto-iconify
2. Browse icons from one of the numerous icon set: https://icon-sets.iconify.design/
3. Pick an icon: https://icon-sets.iconify.design/fa6-brands/bluesky/
4. Use it: {{< iconify fa6-brands:bluesky >}}

I get the HTML/CSS over effect as long as the image does not have hardcoded colour like Mona (octocat).

Screen.Recording.2024-11-29.at.14.30.49.mov

[astrowonk]

Yes, anything that uses the <i> tag like Fontawesome, Bootstrap, or Iconify works and gets mouse-over color changes. This is why I stuck with using FA for my navbar.

The custom image method with markdown, as described in this thread, does not get mouse-over effects, even with an SVG. I edited my earlier comment to make that more clear.

I wrote that so people choosing between the two methods for say, a Bluesky icon, could weigh that when deciding which one to use.

[mcanouil]

Edit the SVG to add a class you can target via CSS and here you go.

<svg class="my-icon">
  <path .../>
</svg>

.my-icon:hover {
  fill: #b22222;
}

[astrowonk]

This is really interesting. I did some manual testing in HTML, and if I put class="bi" in the SVG, and add "icon-link" class to the <a> tag, then the SVG gets all the color and hover properties like the rest of the navbar and blends in perfectly.

But, I don't know if it's possible to get Quarto to put in another class when it generates the <a> tag, since the link is generated by Quarto from the YAML href field and not customizable.

[mcanouil]

You don't need Quarto to do anything. Write your own CSS rule inspired by the default one you can find in Quarto.