Font Awesome Icons are not working

[damienrj]

Describe the problem

The example showing how to use github icons is not working locally or on the doc site https://sphinx-design.readthedocs.io/en/furo-theme/badges_buttons.html?highlight=icons#inline-icons for the furo theme.

Link to your repository or website

No response

Steps to reproduce

https://sphinx-design.readthedocs.io/en/furo-theme/badges_buttons.html?highlight=icons#inline-icons

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[2bndy5]

+1 for this. It still fails when using 6.0.0beta2 (latest) min.css. Additionally, there is something rendering for the RTD CI on my PR, but it doesn't look right.

I noticed that different themes of the sphinx-design docs rendered differently (with respect 2 the fa* roles), but they all seem to show something incorrect. So, I pushed forward and tried the icons in the sphinx-immaterial theme (using 6.0.0beta2), and it does work. However, the size is unaffected despite whatever I put in the fa* role's args.

        - :fab:`git;2em` ``fontawesome/brands/git``
        - :fab:`git-alt;2em` ``fontawesome/brands/git-alt``
        - :fab:`git-square;2em` ``fontawesome/brands/git-square``
        - :fab:`github;2em` ``fontawesome/brands/github``
        - :fab:`github-alt;2em` ``fontawesome/brands/github-alt``
        - :fab:`github-square;2em` ``fontawesome/brands/github-square``
        - :fab:`gitlab;2em` ``fontawesome/brands/gitlab``
        - :fab:`gitkraken;2em` ``fontawesome/brands/gitkraken``
        - :fab:`bitbucket;2em` ``fontawesome/brands/bitbucket``

renders like

[chrisjsewell]

Yeh cheers I'll try to look into it soonish. Really that's why I prefer the octicon icons and soon #41, since here the svg's are directly packaged and so it's easier to ensure consistency

[pradyunsg]

The problem here might be that sphinx-design isn't adding the html_css_files for any theme other than alabaster. :)

sphinx-design/docs/conf.py

Lines 17 to 20 in 2cdadca

	if html_theme == "alabaster":
	html_css_files = [
	"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css"
	]

[chrisjsewell]

That looks like the one cheers! 😅

[2bndy5]

Using latest docs with alabaster theme:

Probably should note that this is rendered in Firefox.

[pradyunsg]

Ah, then there's possibly a more foundational issue here. :)

[2bndy5]

might be a breaking change in the FA CSS. I added the font-family property to the .fas rule and I get the icon to show in the Alabaster theme

.fa, .fab, .fad, .fal, .far, .fas {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: 'FontAwesome'; /* this property was missing */
}

An icon {fas}`spinner;sd-bg-primary sd-bg-text-primary`, some more text.

rendered

[pradyunsg]

Alternatively, adding a fa class to the generated element also works. :)

[2bndy5]

@pradyunsg I found this comment

sphinx-design/sphinx_design/icons.py

Lines 27 to 29 in 43bb2cc

	for style in ["fa", "fas", "fab", "far"]:
	# note: fa is deprecated in v5, fas is the default and fab is the other free option
	app.add_role(style, FontawesomeRole(style))

I'm not sure if there is a newer implication since the latest FA release is v6.1.1. Nonetheless, I think fa class should be added to all FA roles for better backward compatibility, but it isn't required for v6 (maybe only for v5).