Academicicons not displaying properly

[whanley]

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:

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:

[[params.plugins.css]]
link = "plugins/academic-icons/academicons.css"

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

[jmooring]

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:

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

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

[[params.plugins.css]]
link = "plugins/academic-icons/css/academicons.css"

Finally, change the icon classes in config.toml.

[[params.social]]
  icon = "ai ai-orcid"
  link = "https://orcid.org/0000-0002-1832-6805"

[[params.social]]
  icon = "ai ai-zenodo"
  link = "https://zenodo.org/search?page=1&size=20&q=owners:%2020288&sort=-publication_date"

[whanley]

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?

[jmooring]

Yes, that is how to override a theme.