How to use another set of icons than fontawesome

[PierreMarchand20]

What is the best way to add another set of icons, such as https://jpswalsh.github.io/academicons/?

I saw the documentation, but I find it slightly cumbersome to add every icon by hand in the js file, while they are already all defined in a proper svg file. Is it possible to use their CDN instead for example?

[12rambau]

Usually web projects can support only one set of icons at a time. Not only for the consistency of the rendered icons but also because each has its little specifications. Here fontawesome forces us to load multiple different fonts to our css and set them on any "fa" object but also as fontawesome transforms the <i> tags into a <svg> dynamically. As a consequence lots of our selectors point to svg and will be ignored if we loosen the control there.

TBH it looks like a pandora box as everyone will bring its icon set onboard and we don't have the human resources to maintain satisfying support for all of them.

That being said hope is not lost, you can still override the icon-list.html template to your need to be able to use your icon lib and send them to sphinx using the extra_css mechanism: https://github.com/pydata/pydata-sphinx-theme/blob/main/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/icon-links.html

[PierreMarchand20]

I see, I did not think it would be so complicated because academicons is used with fontawesome in other frameworks (for example in this hugo theme). I guess it is easier with this particular set of icons because it really aims to be used in conjonction with fontawesome (the first section in "How do I use it?" is "Alongside Font Awesome"), but I would completely understand if you decide to not add it due to the maintenance burden. Just know that it is a nice set of icons that completes font awesome with academia-related icons :-)

Since I am not very familiar with web-related technology, I can just follow the documentation, but what frightened me is that the svg files provided by academicons contain a lot of information (see here for example) and I was not sure what to extract.

[FranzRoters]

This is what we did:

1. Download the acadmicons.zip file
2. Unpack it to _fonts directory of our website project
3. Add academicons.css file to html_css_files in your config.py
4. Use ai icons for icon links:

  icon_links": [
        {
            'name': 'GitHub',
            'url': 'https://github.com/eisenforschung/damask',
            'icon': 'fab fa-github ai-navbar-icon-links',
        },
        {
            'name': 'Google Scholar',
            'url': 'https://scholar.google.com/scholar?cites=17181250262737854026',
            'icon': 'ai ai-google-scholar ai-navbar-icon-links',
        },
    ],

Note the ai-navbar-icon-links class used above. We define it in custom.css as:

/* correct size for main navigation icons */
.ai-navbar-icon-links{
    font-size: var(--pst-font-size-icon);
}

You can see the outcome here: https://damask.mpie.de

[PierreMarchand20]

Thank you!