How to use custom icons?

[netw0rkf10w]

Description

Hello,

I have been porting my personal website to Quarto and I'm currently facing an issue.

In the exemple website created by Quarto: Create Project > Blog Project, the navigation bar contains a GitHub icon and a Twitter icon. I would like to add a Google Scholar one, but it turns out that this is no obvious because there's no such icon in Bootstrap 5 (which is supported by Quarto).

So what I did is to install the Academicons extension (following http://blog.schochastics.net/post/academicons-my-first-quarto-extension/):

quarto install extension quarto-ext/fontawesome
quarto install extension schochastics/academicons

then in _quarto.yml:

website:
  title: "blog-quarto"
  navbar:
    right:
      - about.qmd
      - icon: github
        href: https://github.com/
      - icon: twitter
        href: https://twitter.com
      - text: "{{< ai google-scholar >}}"
        href: https://scholar.google.fr/citations?user=xxx

but the result is very ugly: the added icon is too small and does not have the same color as the existing ones:

Therefore, my question is how to use customs icons (i.e., those not supported by Bootstrap) in Quarto?

Thank you in advance for your help!

[mcanouil]

This is likely an issue with the extension you are using and how the icons are added via shortcode.

I personally use the Iconify framework to include icons.
For instance, academicons and font awesome icons are in it.
See https://github.com/mcanouil/quarto-iconify.

  navbar:
    title: "MCU"
    search: true
    logo: media/logo.svg
    right:
      - text: About
        href: index.qmd
      - text: Blog
        href: blog.qmd
      - text: Projects
        href: projects.qmd
      - text: Talks
        href: talks.qmd
      - text: Publications
        href: publications.qmd
      - text: "{{< iconify fa6-brands mastodon >}}"
        href: "https://fosstodon.org/@MickaelCanouil"
        rel: me
      - text: "{{< iconify fa6-brands twitter >}}"
        href: "https://twitter.com/MickaelCanouil"
      - text: "{{< iconify fa6-brands linkedin >}}"
        href: 'https://www.linkedin.com/in/mickaelcanouil'
      - text: "{{< iconify fa6-brands github >}}"
        href: "https://github.com/mcanouil"
      - text: "{{< iconify fa6-regular heart >}}"
        href: "https://github.com/sponsors/mcanouil?o=esb"

If you get the same output with this extension, then the issue is the icon itself, which mean you have to manually style it to fit your needs.
Note that my extension has a size attribute as well as other funny/useful attributes.

[netw0rkf10w]

Works like a charm! Great extension! Thank you so much!

[mcanouil]

Maybe let the maintainer know about the issue you had with his extension.

[netw0rkf10w]

I'll do that. Thanks!

[souadg]

Super useful, merci !

[ritog]

Very useful extension, and much helpful answer. Thanks!

[santoshdbhosale]

Hello,
I did installation of @mcanouil extension and used the following code in _quarto.yml

• text: "{{< iconify ai google-scholar >}}"
  href: my google scholar url
  It did not work. Could you please comment on it?
  Thanks

[santoshdbhosale]

Hi,
Please see the _quarto.yml

start of the navigation bar at the top of the website

navbar:
pinned: true
logo: /img/logo.png

# your sub-pages
left:
  - text: "About"
    href: about/index.qmd
  - text: "CV"
    href: cv/index.qmd
  - text: "Blog"
    href: blog/index.qmd

# your social media handles
right:
  - icon: linkedin
    href: https://www.linkedin.com/in/xxxx/
  - icon: github
    href: https://github.com/xxxx
  - text: "{{< iconify ai google-scholar >}}"
    href: https://scholar.google.com/citations?user=xxxxx=en
  - icon: envelope
    aria-label: email
    href: "mailto:xxxxx@gmail.com"  

Then rendered the website. I builded my website by following the instructions from.
https://www.marvinschmitt.com/blog/website-tutorial-quarto/
I am not hardcore coder but use the publicly available code for my work.

Thanks

[mcanouil]

It's not reproducible.

I don't see anything obvious, but did you install the extension?

[santoshdbhosale]

Yes.

[mcanouil]

Sorry to be blunt here, but we don't need someone else website, screenshots, snippets of code, etc. to help you.
We need your code, very likely as a Git repository.
I'am afraid that if you don't provide your code, I (and others) won't be able to help you.

The extension has to be installed in your project.
Everything in Quarto works inside a project. Nothing is system-wide.

[santoshdbhosale]

Hi @mcanouil,
Thanks for the comment. I installed now in my project rather than the system-wide and it worked.
Thanks for the great extension!

[brophyj]

Hi @mcanouil,
Can you change the color of the icon? I have installed the google-scholar from iconify but it shows simply as a blank space on my blue navigator bar. When i click the blue space it correctly hyperlinks to my google scholar page.

[mcanouil]

Can you change the color of the icon?

Not the best wording if I may.

1. Extensions have to be installed inside the project
2. Use span divs as documented in Quarto ton add additional attributes: `whatever including shortcodes`{style="color:#b22222;"}

Note that, no additional help can be provided without a reproducible example and/or Git repository showing actual code.

[brophyj]

Hi @mcanouil, Here is a reproducible (I hope) example. _yaml file --- project: type: website output-dir: docs website: title: "jay's website" navbar: background: primary search: true tools: - icon: twitter href: https://twitter.com/brophyj - icon: github href: https://github.com/brophyj - icon: linkedin href: https://www.linkedin.com/in/brophyj/ - text: "{{< iconify ai googlescholar >}}" href: https://scholar.google.ca/citations?user=IXoZb4wAAAAJ&hl=en - text: "{{< iconify ai orcid>}}" href: https://orcid.org/my-orcid?orcid=0000-0001-8049-6875 - icon: envelope aria-label: email href: ***@***.***" format: html: theme: pulse css: styles.css toc: true editor: visual --- and a basic index.qmd file ``` --- about: template: jolla id: about-block format: html: theme: cosmo toc: true --- ::: {#about-block} ::: ::: {.justify} :::{style="color: black; font-size: 20px;"} bllab, blab, blab ::: ::: ``` On the navigator bar on the left there is a space between linkin and email logo where google-scholar and orcid should be. Clicking the empty spaces does bring up the right hyperlinks. Thanks for any help. James (Jay) Brophy MD PhD Professor of Medicine & Epidemiology (McGill University) website: www.brophyj.com<http://www.brophyj.com/> twitter: @brophyj<https://twitter.com/brophyj> On Mar 4, 2024, at 11:19 AM, Mickaël Canouil ***@***.***> wrote: You don't often get email from ***@***.*** Learn why this is important<https://aka.ms/LearnAboutSenderIdentification> Can you change the color of the icon? Not the best wording if I may. 1. Extensions have to be installed inside the project 2. Use span divs as documented in Quarto ton add additional attributes: `whatever including shortcodes`{style="color:#b22222;"} Note that, no additional help can be provided without a reproducible example and/or Git repository showing actual code. — Reply to this email directly, view it on GitHub<#5816 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACVTJTAKXORHUYRLDWNLGCDYWSNI5AVCNFSM6AAAAAAY3BYGXOVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DMNRZGA3TI>. You are receiving this because you commented.Message ID: ***@***.***>

[mcanouil]

Oh the "toolbar", there is an issue opened about that.
Not all "text" fields support markdown.

Navigation bar works fine: https://deploy-preview-153--mickaelcanouil.netlify.app

[cscheid]

I see this issue going back to at least 1.3.450, if it's a regression, it's not a 1.4 regression.

[mcanouil]

Here it is:

• Navbar - tools - text doesn't render markdown #6359

[brophyj]

That is exactly my problem.
Sorry if my first try at reproducing the issue wasn't clear.
I still don't see how to correct the issue or even if it is possible to correct.

[mcanouil]

@brophyj it's on Quarto side for "tools". Elsewhere, it's working for me, so that's in your code.