Academicicons not displaying properly

I’m trying to add academic icons to my webpage (source code) built with the parsa theme.

The two icons I want appear in the footer, but they are displayed incorrectly:
Screen Shot 2021-04-01 at 11.42.54 AM

This is how I installed the icons:

  • downloaded academicons zip
  • put the fonts folder and academicons.css into .../themes/parsa/static/plugins/academic-icons/
  • added these lines to my config.toml:
link = "plugins/academic-icons/academicons.css"

Academicons has very clear instructions, but I don’t understand Hugo enough to implement them :(.

First, don’t make any modifications (including additions) inside of the themes directory. You should override the theme as needed.

Second, the structure of the plugins directory is wrong. Do this:

mkdir static/plugins
mv themes/parsa/static/plugins/academic-icons/ static/plugins/
mkdir static/plugins/academic-icons/css
mv static/plugins/academic-icons/academicons.css static/plugins/academic-icons/css/

The resulting structure should be:

└── academic-icons
    ├── css
    │   └── academicons.css
    └── fonts
        ├── academicons.eot
        ├── academicons.svg
        ├── academicons.ttf
        └── academicons.woff

Third, change the path to the CSS in config.toml.

link = "plugins/academic-icons/css/academicons.css"

Finally, change the icon classes in config.toml.

  icon = "ai ai-orcid"
  link = ""

  icon = "ai ai-zenodo"
  link = ""

Thanks, this works perfectly.

Just to confirm (and sorry that this is basic): will something I put in a top-level folder (such as /plugins) will always override whatever’s in the theme directory? I.e., that’s where hugo looks first?

Yes, that is how to override a theme.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.