refactor: Replace icon font with SVG icons

[MoritzWeber0]

• Only load used icons via SVGs instead of loading all icons via the font (this is more efficient as GitHub pages has no proper caching)

• Avoid rendering issues when using slow internet connections:

  

See also this discussion: #419 (comment)

[netlify]

✅ Deploy Preview for fipguide ready!

Name	Link
🔨 Latest commit	934c037
🔍 Latest deploy log	https://app.netlify.com/projects/fipguide/deploys/69df260f5a9b750008f97cc0
😎 Deploy Preview	https://deploy-preview-790--fipguide.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Hi there! 👋

Thank you for your contribution to the FIP Guide! 🚀
We appreciate your effort in making rail staff travel information more accessible. 🚄

Checklist before merging:

• Added a description to the Pull Request
• Checked the License of new pictures (non-commercial use without attribution)
• Modified content in English
• Modified content in German
• Modified content in French

[therobrob]

thank you Moritz :) the icons have an other size than before, is this intended? In addition to the comments below, I noticed that the icons of the highlights are much smaller (14x14px), also of the buttons (15x15px) and dialog-close (15x15px). The line thickness of all icons is also different. The icon of the copy-toast is a little too high up.

[MoritzWeber0]

thank you Moritz :) the icons have an other size than before, is this intended? In addition to the comments below, I noticed that the icons of the highlights are much smaller (14x14px), also of the buttons (15x15px) and dialog-close (15x15px).

To some extend the size of the icons will vary as it's not straightforward to represent the exact size of the font. To be able to control the size of the icons via the font-size attribute as it was done before (and also makes sense to match the current text size for in-line icons), I use the em property, which is calculated considering parent elements, so the resulting numbers can be odd sometimes, but that's just a technical detail and shouldn't have larger visual effects.

I'll check the mentioned issues and will fix them as best as possible, thanks for checking 👍

The line thickness of all icons is also different. The icon of the copy-toast is a little too high up.

I couldn't find a way to derive the icon weight (different file) via the CSS weight / bold property. So for simplicity reasons, I removed the icons with weight 400 for now and just kept using the icons with weight 700; in comparison I liked them more.

[MoritzWeber0]

It wasn't intentional, but I somehow like the smaller icons more. What do you think?

This is fixed

[therobrob]

It wasn't intentional, but I somehow like the smaller icons more. What do you think?

This is fixed

@MoritzWeber0 could you please check the images, they are broken. thanks!

[therobrob]

thank you Moritz :) the icons have an other size than before, is this intended? In addition to the comments below, I noticed that the icons of the highlights are much smaller (14x14px), also of the buttons (15x15px) and dialog-close (15x15px).

To some extend the size of the icons will vary as it's not straightforward to represent the exact size of the font. To be able to control the size of the icons via the font-size attribute as it was done before (and also makes sense to match the current text size for in-line icons), I use the em property, which is calculated considering parent elements, so the resulting numbers can be odd sometimes, but that's just a technical detail and shouldn't have larger visual effects.

I'll check the mentioned issues and will fix them as best as possible, thanks for checking 👍

The line thickness of all icons is also different. The icon of the copy-toast is a little too high up.

I couldn't find a way to derive the icon weight (different file) via the CSS weight / bold property. So for simplicity reasons, I removed the icons with weight 400 for now and just kept using the icons with weight 700; in comparison I liked them more.

is there a reason, why you removed all commits before? It's more work to check the new changes because I can't see what they are. :(

I use the em property, which is calculated considering parent elements, so the resulting numbers can be odd sometimes, but that's just a technical detail and shouldn't have larger visual effects.

It's very important to me as a designer not to use odd values. Furthermore, I see no added value in implementing it that way. Can you please explain?

[MoritzWeber0]

is there a reason, why you removed all commits before? It's more work to check the new changes because I can't see what they are. :(

Are there specific commits you are missing? I still see 13 commits in the PR and can't remember removing any commits intentionally.

It's very important to me as a designer not to use odd values. Furthermore, I see no added value in implementing it that way. Can you please explain?

Explained here: #790 (comment).
However, I switched back to even values for the reasons mentioned.

[therobrob]

The icons have the same size than before now. Thank you!
Sorry for being so persistent. 😅