Don't load FontAwesome webfont in badge_only.css?

[mgeier]

Please note that badge_only.css is inserted by RTD even if sphinx_rtd_theme is not used.

It seems a bit much to load the whole FontAwesome web font just to get two icons.

Wouldn't it make more sense to include the raw SVG code in the delivered HTML?

Ideally, this could be removed:

https://github.com/readthedocs/sphinx_rtd_theme/blob/0da22b885be387b79f7552c92be00fd14d11228a/src/sass/badge_only.sass#L15

And those are the replacement SVG files: https://github.com/FortAwesome/Font-Awesome/blob/5.x/svgs/solid/book.svg https://github.com/FortAwesome/Font-Awesome/blob/5.x/svgs/solid/caret-down.svg

One thing that's strange is that the current book icon is slanted, while the SVG is upright, where does the slant come from?

[mgeier]

I've created a proof of concept: https://github.com/readthedocs/readthedocs.org/pull/9297

With such a thing, loading the webfont (and some of the CSS) could be avoided.

[benjaoming]

Hi @mgeier :wave:

This could work well for the many documentation sites that don't use sphinx_rtd_theme. Especially also since assets are fetched per documentation subdomain. So even though projectX.readthedocs.io and projectY.readthedocs.io both load the webfont, they will load their own instance.

The FA icons' availability in sphinx_rtd_theme have become known and used. example 1 example 2 example 3. But I don't see examples where they are used in other themes.

[mgeier]

The FA icons' availability in sphinx_rtd_theme have become known and used.

Yes, but if I understand correctly, the FA webfont is loaded separately when the RTD theme is used. I think in that case it is loaded from https://media.readthedocs.org/css/sphinx_rtd_theme.css.

So even if the webfont is removed from badge_only.css, it will still be available for sites using the RTD theme, right?

In fact, badge_only.css isn't even loaded when the RTD theme is used, so removing FA from there will not have any effect on sites using the RTD theme.

[mgeier]

I think this is where FA is loaded for the RTD theme:

https://github.com/readthedocs/sphinx_rtd_theme/blob/0da22b885be387b79f7552c92be00fd14d11228a/src/sass/theme.sass#L30-L32

I'm not suggesting to change this!

[benjaoming]

So even if the webfont is removed from badge_only.css, it will still be available for sites using the RTD theme, right?

Correct yes, and I understand the suggestion - so the open question was more in case that the usage of FA through badge_only.css would have somehow been picked up by documentation projects that are hosted by RTD but don't use sphinx_rtd_theme. I think that it's unlikely since it gets injected by RTD JS scripts, so anyone trying to use these icons wouldn't be able to see them on local builds.

[mgeier]

I have tried the new "addons" feature in https://just-testing-the-insipid-sphinx-theme.readthedocs.io/en/latest/index.html and it looks like (if I'm not mistaken) some "font awesome" stuff is still loaded (from readthedocs-addons.js): https://pagespeed.web.dev/analysis/https-just-testing-the-insipid-sphinx-theme-readthedocs-io-en-latest-showcase-tables-html/q75ory8lmr?form_factor=mobile

Why is this still loaded? The new flyout doesn't even seem to show any font-awesome symbols anymore (but an embedded SVG instead, which makes much more sense).