How to use custom icons? #5816
-
DescriptionHello, I have been porting my personal website to Quarto and I'm currently facing an issue. In the exemple website created by So what I did is to install the Academicons extension (following http://blog.schochastics.net/post/academicons-my-first-quarto-extension/): then in 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! |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 28 replies
-
|
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. 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. |
Beta Was this translation helpful? Give feedback.
-
|
Works like a charm! Great extension! Thank you so much! |
Beta Was this translation helpful? Give feedback.
-
|
Maybe let the maintainer know about the issue you had with his extension. |
Beta Was this translation helpful? Give feedback.
-
|
I'll do that. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Super useful, merci ! |
Beta Was this translation helpful? Give feedback.
-
|
Very useful extension, and much helpful answer. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Hello,
|
Beta Was this translation helpful? Give feedback.
-
|
Hi, start of the navigation bar at the top of the websitenavbar: Then rendered the website. I builded my website by following the instructions from. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
It's not reproducible. I don't see anything obvious, but did you install the extension? |
Beta Was this translation helpful? Give feedback.
-
|
Yes. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry to be blunt here, but we don't need someone else website, screenshots, snippets of code, etc. to help you. The extension has to be installed in your project. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mcanouil, |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mcanouil, |
Beta Was this translation helpful? Give feedback.
-
Not the best wording if I may.
Note that, no additional help can be provided without a reproducible example and/or Git repository showing actual code. |
Beta Was this translation helpful? Give feedback.
-
|
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: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
Oh the "toolbar", there is an issue opened about that. Navigation bar works fine: https://deploy-preview-153--mickaelcanouil.netlify.app |
Beta Was this translation helpful? Give feedback.
-
|
I see this issue going back to at least 1.3.450, if it's a regression, it's not a 1.4 regression. |
Beta Was this translation helpful? Give feedback.
-
|
Here it is: |
Beta Was this translation helpful? Give feedback.
-
|
That is exactly my problem. |
Beta Was this translation helpful? Give feedback.
-
|
@brophyj it's on Quarto side for "tools". Elsewhere, it's working for me, so that's in your code. |
Beta Was this translation helpful? Give feedback.
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.