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	2ccb042
🔍 Latest deploy log	https://app.netlify.com/projects/fipguide/deploys/69dbe7dc8b688c00083f4f0f
😎 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.

[therobrob]

the icon is smaller than before, it should be 20x20px

[MoritzWeber0]

With the general size increase, it's now 17x17 vs 18x18 on my side. I do think it looks slightly better with the alignment:

Before:

After:

If you like the previous icon more, I can increase the font-size to 1.25em, then it's ~18px on my side again.

[therobrob]

In my opinion it got worse :(

• The Icon is not visually centered
• the focus indicator is not harmonic

[MoritzWeber0]

Ok, let's sum it up: I initially changed the logic from rem sizing to em sizing. This has the advantage of automatically adjusting the icon size depending on the used font-size.

In the end it resulted in many unwanted changes, so thanks for challenging it. I have now changed it again to the rem approach. This makes it a lot cleaner again.

[MoritzWeber0]

Can you verify that it's better now?

[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 internationally.

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.