schochastics / academicons

quarto extension to use academicons in HTML documents

Academicons Extension for Quarto

This extension provides support for academicons (v1.9.4). Icons can be used in HTML documents only.

The code is adapted from the fontawesome extension.

Installing

quarto install extension schochastics/academicons

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Using

To embed an icon, use the {{{< ai >}}} shortcode. For example:

{{< ai arxiv >}} 
{{< ai google-scholar >}}
{{< ai open-access >}}
{{< ai open-access size=5x >}}

You can browse all of the available icons here:

https://jpswalsh.github.io/academicons/

Sizing Icons

This extension provides relative, literal, and LaTeX-style sizing for icons.
When the size is invalid, no size changes are made.

• Relative sizing: {{< ai open-access size=2xl >}}.

  Relative Sizing Class	Font Size	Equivalent in Pixels
  2xs	0.625em	10px
  xs	0.75em	12px
  sm	0.875em	14px
  lg	1.25em	20px
  xl	1.5em	24px
  2xl	2em	32px

• Literal sizing: {{< ai open-access size=5x >}}.

  Literal Sizing Class	Font Size
  1x	1em
  2x	2em
  3x	3em
  4x	4em
  5x	5em
  6x	6em
  7x	7em
  8x	8em
  9x	9em
  10x	10em

• LaTeX-style sizing: {{< ai open-access size=Huge >}}.

  Sizing Command	Font Size (HTML)
  tiny (= \tiny)	0.5em
  scriptsize (= \scriptsize)	0.7em
  footnotesize (= \footnotesize)	0.8em
  small (= \small)	0.9em
  normalsize (= \normalsize)	1em
  large (= \large)	1.25em
  Large (= \Large)	1.5em
  LARGE (= \LARGE)	1.75em
  huge (= \huge)	2em
  Huge (= \Huge)	2.5em

• CSS-style sizing: {{< ai open-access size=2em >}}.

Coloring icon

The color of the icon can be changed via the color parameter.
{{< ai open-access color=red >}}

Example

Here is the source code for a minimal example: example.qmd

This is the output of example.qmd for HTML.

academicons's Issues

Set a default color

It seems that no default color is defined

When use for instance markdown {{< ai orcid title='orcid' >}}, get the following in HTML html <i class="ai ai-orcid" title="orcid" style="color:"></i>, which is not valid on https://validator.w3.org/ which raise:

Error: CSS: color: Parse Error.

[question] How do I add an academicon in About link?

About pages may use some icons (twitter, github, etc):
https://quarto.org/docs/websites/website-about.html

Is it possible to use academicons? how?

I was expecting something like this:

---
title: Finley
about:
  template: trestles
  links:
    - text: Google Scholar
      icon: google-scholar
      url: https://
---

navbar use question

Can those be used in the navbar of a quarto website as either a icon or in the right/left part as an icon/url pair? It doesn't seem to render the icon when I try it.

GET: /quarto-render/ (404: Not Found) after installing

Hi,

I installed your extension as suggested but now I am seeing this error in RStudio when I save and render my qmd fle

"Error in utils::download.file(paste0("http://localhost:", port, "/quarto-render/"),  : 
cannot open URL 'http://localhost:6076/quarto-render/'"

I reinstalled quarto and now see this error in the Terminal:

GET: /quarto-render/ (404: Not Found)

how can these be used in a quarto about page?

https://quarto.org/docs/websites/website-about.html

The example they give is via the YAML header. How could the google scholar one be put in as the icon? The short codes don't work in this placement.

---
title: "Finley Malloc"
about:
  template: jolla
  image: profile.jpg
  links:
    - icon: twitter
      text: twitter
      href: https://twitter.com
    - icon: github
      text: Github
      href: https://github.com
---

Icons do not work in conjunction with Bootstrap buttons

Hi there,

I tried to use the academicons together with Bootstrap icons and buttons as follows:

[ Google Scholar](https://...){.ai-google-scholar .btn-primary .btn .btn-sm role="button"}

However, for some reason, this doesn't work, the icon doesn't properly load.

I also tried adding the .ai class as follows:

[ Google Scholar](https://...){.ai .ai-google-scholar .btn-primary .btn .btn-sm role="button"}

While that makes the icon load, it makes the button smaller than the default Bootstrap buttons, and changes the font:

It would be great if this can be made compatible with the default Bootstrap icons so I can use them on buttons, together with the existing Bootstrap social media icons.

How to add the icon inside the title section?

Hello,
Thanks for this great package.

I am having trouble including the icon in the title section.

---
title: "About"
image: profile.jpg
about:
  template: jolla
  links:
    - icon: linkedin
      text: LinkedIn
      href: https://linkedin.com
    - icon: github
      text: Github
      href: https://github.com
    - icon: {{< ai google-scholar >}}
      text: Publications
      href: https://linkedin.com
---

About this blog
{{< ai google-scholar >}}

The Google Scholar icon will be executed for the last line but not for the links in the title section.

Canvas LMS icon request

Thanks for the extension! Would be handy to have a Canvas LMS icon: https://www.instructure.com/about/brand-guide/download-logos

Sizing issue

Hi! I found that the sizing option is not working perfectly. Actually, the only literal sizing is returning an expected result. See an example below:

I am using quarto version 1.0.38

{width="50%"}

---
title: "Test"
toc: true
format: html
---

## Font Awesome
All examples should be equal to `2em`. They are.

`size=2xl` {{< fa battery-half size=2xl >}}
`size=2x ` {{< fa battery-half size=2x >}}
`size=huge` {{< fa battery-half size=huge >}}

## Academic Icons
All examples should be equal to `2em`. They are not…

`size=2xl` {{< ai google-scholar size=2xl >}}
`size=2x` {{< ai google-scholar size=2x >}}
`size=huge` {{< ai google-scholar size=huge >}}

## Academic Icons
Comparison of `2xl` (left) and `xl` (right). They are equal…

`size=2xl` {{< ai google-scholar size=2xl >}}
`size=xl` {{< ai google-scholar size=2xl >}}

Icons are not displayed in the same color as Quarto's default ones

Hello,

I was suggested to report an issue with your extension. Please see the discussion here: quarto-dev/quarto-cli#5816

Best regards.