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:
- 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)