Overwriting bootstrap icons in Quarto

Publishing Your Results
, ,
1

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. Something about being in the "About" page is causing "bi-" to be prepended to the icon name in the <i> tag, even though a new template has been provided. However, I have not been able to track down where or why this is happening. Is there a way to prevent the addition of "bi-"?

Possibly useful links:

2

Thanks for the report.

However, I have not been able to track down where or why this is happening.

I believe for now for about page, and also Quarto website in general, we expect icon: to be bootstrap icons so we add the prefix to the link. This happens at

This would be a feature request to support more generic icon. Maybe we could not do it if a custom template is provided, or we need to add a configuration.

Please do open an issue in quarto-dev/quarto-cli about this ! Thank you

Is there a way to prevent the addition of "bi-"?

For now, I don't think there is a way to prevent it as you can see in the code.
only workaround I see would be to add some JS script to process your icon class and remove it if present. As you define a custom template already for the page, it is probably easy to add such JS processing dedicated to the page.