Search code examples
navbarquarto

How to include a custom icon in a navbar link by modifying a _quarto.yml?


Given a _quarto.yml such as:

project:
  type: website

website:
  title: "myTITLE"
  
  navbar:
    logo: "file.png"
    left:
      - href: index.qmd
        text: Home
      - about.qmd
      - license.qmd
      - citation.qmd

I would like to change "license.qmd" by a badge. The following does not work:

project:
  type: website

website:
  title: "An affordable system for the hyperspectral scanning and processing of sediment cores"
  
  navbar:
    logo: "HSILab.png"
    left:
      - href: index.qmd
        text: Home
      - about.qmd
      - [![Attribution-NonCommercial-ShareAlike](https://licensebuttons.net/i/l/by-nc-sa/ffffff/00/00/00/88x31.png)](https://creativecommons.org/licenses/by-nc-sa/2.0/) 
      - citation.qmd

Is there a way to do it?


Solution

  • You can use the text key like this:

    _quarto.yml

    project:
      type: website
    
    website:
      title: "Title"
      
      navbar:
        left:
          - href: index.qmd
            text: Home
          - about.qmd
          - href: https://creativecommons.org/licenses/by-nc-sa/2.0/
            text: "![](https://licensebuttons.net/i/l/by-nc-sa/ffffff/00/00/00/88x31.png)"
          - citation.qmd
    

    enter image description here