Note from 3 November 2022

Do we really need to repeat that using an icons font is a bad idea?

This is #Mastodon UI right now:

Fonts are not loaded because of an error (from a Service Worker?):

Very welcoming for new Mastodon users… 😔

18 reactions

5 likes

1 repost

12 replies

Emmanuel 🌱
@nhoizey Je vais dire un truc moche de développeur, mais si tu as le loisir de faire un ticket à ce sujet ?
J'ignore combien il y en a sur l'intégralité du code de Masto, mais ça n'est pas un problème si énorme à résoudre pour les dev qui bossent dessus.
D'autant que OUI, c'est un vrai problème d'accessibilité et d'inclusivité, une des valeurs de Masto.
- 3 November 2022, 10:19
- Source
Nicolas Hoizey
@emmanuelc le ticket existe déjà depuis 5 ans : https://github.com/mastodon/mastodon/issues/1469Ainsi que quelques autres sur les soucis quand on utilise une fonte pour dyslexiques, par exemple.
Consider: SVG for icons? · Issue #1469 · mastodon/mastodon
- 3 November 2022, 10:31
- Source
Emmanuel 🌱
@nhoizey Ah zut 😞 Cinq ans, c'est vachement long dis-donc.
- 3 November 2022, 10:32
- Source
Nicolas Hoizey
@emmanuelc yep… 😔Eugen a dit il y a quelques jours qu'il aimerait avoir d'autres icônes que celles de FontAwesome, mais il n'a pas dit s'il considérait SVG comme la bonne cible :
https://github.com/mastodon/mastodon/issues/19513#issuecomment-1296335436
- 3 November 2022, 10:36
- Source
BohwaZ
@nhoizey Perso j'utilise des symboles unicode qui ont du sens même si la fonte est pas chargée, ça évite ce genre de trucs.Et comme chaque icône est accompagnée d'un texte (mieux qu'une icône seule), elle est cachée pour les lecteurs d'écran, donc pas de souci d'accessibilité.Mon souci avec les sprites SVG c'est que (à mon souvenir) on ne peut pas appeler les sprites depuis CSS, hors pour moi les icônes sont juste un "plus" visuel (défini en CSS) et ne sont pas définies dans le HTML.
- 3 November 2022, 10:59
- Source
Nicolas Hoizey
@bohwaz les symboles unicode, c'est déjà mieux, mais est-ce bien supporté partout ?Sur l'interface de Mastodon, les icônes sont seules, sans label texte, donc le problème est plus grave.Côté sprite SVG, s'il n'y a qu'une dizaine d'icônes, l'idéal est de le mettre inline. Mais on peut tout à fait l'utiliser via CSS background si on n'a pas besoin d'en changer les couleurs en CSS.Sur Mastodon, c'est de toute façon du React, il y a d'autres façons de faire, plus dynamiques.
- 3 November 2022, 11:04
- Source
BohwaZ
@nhoizey oui le souci aussi c'est que chez moi l'utilisateur peut configurer la couleur de tout.Le support des symboles unicode j'ai testé sur Windows, Android et Linux et pas de souci le symbole est bien affiché.Oui effectivement pour Mastodon c'est naze :( mais bon l'UI est pas top déjà je trouve à la base. Mais bon c'est déjà bien moins pire que Twitter qui est une horreur super lente, et quand tu regarde le markup, tu fait une crise cardiaque.
- 3 November 2022, 11:11
- Source
Nicolas Hoizey
@bohwaz la meilleure solution AMHA si on veut/doit utiliser une fonte pour les icônes, c'est d'utiliser des ligatures, comme avec https://symbolset.com/Mais cela nécessite de l'espace, si la ligature n'est pas appliquée faut de chargement de la (bonne) fonte.C'est d'ailleurs possible avec FontAwesome (jamais testé) : https://fontawesome.com/docs/desktop/add-icons/ligatures

Symbolset - Turn words into icons using font magic
- 3 November 2022, 11:28
- Source
BohwaZ
@nhoizey perso sur mon vivaldi les fontes en ligature ça marche pas, le texte n'est pas remplacé par l'icône, donc j'ai pas poussé plus loin.
- 3 November 2022, 11:36
- Source
Nicolas Hoizey
@bohwaz ah zut, ça aide pas ! 😅
- 3 November 2022, 11:41
- Source
Alex Russell
@nhoizey for perf, they're much better than SVG. Complex tradeoffs
- 3 November 2022, 22:36
- Source
Nicolas Hoizey
@slightlyoff "it depends" 😅Depends where they are in the UI, if they are single instances or repeated multiple times, etc.Fonts (unless inline base64 subset?) can't be faster than inline SVG for critical UI icons above the fold, IMHO.On some projects, I have multiple ways to use SVG: some inline SVGs (logos), some in a shared inline sprite (main UI icons), some in an external sprite (secondary icons, not shown ATF) and even sometimes others as external individual images.
- 3 November 2022, 22:47
- Source

Note from 14 December 2022
- Nicolas Hoizey
- 14 December 2022
- Mastodon, UX
- 8 reactions
It's pretty annoying to see the same toot repeatedly on #Mastodon because everyone is boosting it, even if it's legitimately awesome.

Currently, a boost of a toot is only posted if at least 40 other toots have been posted since the previous boost of the same toot.

There is a GitHub issue asking to allow the user to change this number, or set a duration instead:
https://github.com/mastodon/mastodon/issues/18693

Please vote!
Tyler Sticka

Seriously, Don’t Use Icon Fonts
- Nicolas Hoizey
- 11 May 2022
- icon, font
- 1 reaction
I share it now, but Tyler wrote it 7 years ago, and many other said the same, so I really wonder why people keep using icon fonts… 🤦‍♂️ we need to…
Note from 11 May 2022
- Nicolas Hoizey
- 11 May 2022
- font, icon
- 1 reaction
How many times do we have to say it?

Stop.
Using.
Icon fonts.

Seriously, Don’t Use Icon Fonts.

Here the font request responds with a 503 error (via the Service Worker)…
Simon Hearne

How to avoid layout shifts caused by web fonts
- Nicolas Hoizey
- 20 January 2021
- font, UX, CLS, Core Web Vitals, WebPerf
- 7 reactions
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly…

Note from 3 November 2022

Related contents with similar topics