Generic icon support

[wjakethompson]

Description

This was originally posted to the Posit forum, and is cross-posted here as recommended by @cderv.

I'm creating a website for an organization, which includes a series of "About" pages for each member. The profile pages are following the trestles template, with links to external pages (e.g., personal websites, socials). Currently, we can specify an icon for each link in the yaml header. However, the icons are limited to the Bootstrap icons .

I would like to use FontAwesome icons instead, as FA has icons available that Bootstrap does not, such as Bluesky and ORCID. To achieve this, I have created new templates for both the listing page and each profile page.

On the rendered listing page, everything works as expected. The FontAwesome icons display as expected. However, on the rendered profile pages , things do not work. In the template, the links are defined as:

<a href="<%= link.href %>" class="about-link" rel="<%= link.rel %>" target="<%= link.target %>">
  <i class="<%= link.icon %>"></i>
  <span class="about-link-text"><%= link.text %></span>
</a>

The link.icon in the YAML is defined as, for example, icon: fa-brands fa-github.

However, in the rendered HTML, a "bi-" is being prepended to the icon name:

<a href="https://github.com/wjakethompson" class="about-link" rel="" target="" data-original-href="https://github.com/wjakethompson">
  <i class="bi-fa-brands fa-github"></i>
  <span class="about-link-text">GitHub</span>
</a>

The link in the template is defined the same for both the listing page and the about page. However, in the about page, the "bi-" automatically prefixed:

quarto-cli/src/project/types/website/website-navigation.ts

Lines 1295 to 1300 in 3f492cc

	function resolveIcon(navItem: NavigationItemObject) {
	// resolve icon
	navItem.icon = navItem.icon
	? !navItem.icon.startsWith("bi-") ? `bi-${navItem.icon}` : navItem.icon
	: navItem.icon;
	}

Ultimately, it would be nice to have more flexible icon definitions to use sets other than the bootstrap icons. Alternatively, it would be helpful if the behavior was consistent across the different types of pages (i.e., listing page where the "bi-" is not automatically prefixed vs. an about page where it is).

Possibly useful links:

Listing page (icons work here)
Template: r-dcm.org/assets/team-listing.ejs at main · r-dcm/r-dcm.org · GitHub
Source doc: r-dcm.org/team/index.qmd at main · r-dcm/r-dcm.org · GitHub
Rendered page: Meet the team | r-dcm – r-dcm
About page (icons don't work here)
Template: r-dcm.org/assets/team-member.ejs.html at main · r-dcm/r-dcm.org · GitHub
Source doc: r-dcm.org/team/wjakethompson/index.qmd at main · r-dcm/r-dcm.org · GitHub
Rendered page: W. Jake Thompson | r-dcm – r-dcm

[mcanouil]

Use one of the Quarto extensions available and set the icon using the provided shortcode in the text field. The icon key is reserved to Bootstrap embedded icons. Note that if those icons are embedded, it's because Quarto uses Bootstrap for many (if not all) HTML features.

• https://github.com/mcanouil/quarto-iconify
• https://github.com/quarto-ext/fontawesome
• https://github.com/shafayetShafee/material-icons
• https://github.com/shafayetShafee/bsicons

If you target only HTML, I highly recommend Iconify: "All popular icon sets, one framework. Over 200,000 open source vector icons."

My personal website only uses Iconify: https://mickael.canouil.fr/ see for instance the source of the main page: https://github.com/mcanouil/mickael.canouil.fr/blob/main/index.qmd
Another example: https://m.canouil.dev/quarto-extensions/