use Font Awesome fonts for icons

[osma]

Reasons for creating this PR

The "copy to clipboard" icon was changed to a SVG image derived from the Font Awesome Free icon set in PR #1309. But picking just a single item of the set into a SVG file turned out to be cumbersome especially for Skosmos widgets, which may need many such icons. So this PR changes the way we use Font Awesome, switching to the official Web Fonts+CSS method which means including the whole icon set as a Web Font and then using CSS rules to show individual icons. The same icons may then easily be used by Skosmos widgets as well.

Link to relevant issue(s), if any

• continuation of Use copy to clipboard icon from Font Awesome Free set #1309

Description of the changes in this PR

• include Font Awesome font and CSS files (minimal selection that only contains the Regular icon set)
• include the CSS files in the HTML HEAD section
• replace the copy to clipboard SVG icons with a <span> element that shows the corresponding icon via CSS classes
• adjust CSS rules for better layout of the clipboard icon

Known problems or uncertainties in this PR

n/a

Checklist

• phpUnit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if not, explain why below)
• The PR doesn't introduce unintended code changes (e.g. empty lines or useless reindentation)

[codecov]

Codecov Report

Merging #1319 (4a780c2) into master (a54f285) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1319   +/-   ##
=========================================
  Coverage     70.36%   70.36%           
  Complexity     1649     1649           
=========================================
  Files            32       32           
  Lines          3790     3790           
=========================================
  Hits           2667     2667           
  Misses         1123     1123           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a54f285...4a780c2. Read the comment docs.

[kinow]

Only downside of fixed pixel size is for users that need to change page zoom,as the icon does not scale.

[osma]

I don't think that applies nowadays. CSS pixels are not the same as screen pixels, and when you zoom in on a web page, browsers will happily adjust text sizes even if they are declared in px.

[osma]

I tested this using Firefox and Chromium. The icon scales along with the text in both browsers when you zoom in.

[kinow]

Yup, when you zoom in in your browser that works. But vision impaired users normally have different font-sizes configured in their browsers.

In that case the web application using pixels is not always rendered correctly.

To test it with Chromium, for instance, go to Settings / Appearance. Then change Font Size that should be set to its default (24) to something like Huge 72 just to test.

In the GIF below, I'm showing SKOSMOS after changing the browser font size to Huge. Notice that the icon and the text are using the pixel size, ignoring that I've changed the font size (i.e. not relative like em or rem). Then I'm changing the font size to 1em in the icon, and then 1em for the CSS root variable.

There are other cases where the fixed pixel size doesn't work or gets in the way of users that with different configurations, but I remember this one because I use a large font size in some devices — family history of poor vision, so I've already learned how to use a screen reader, and try to promote WCAG 2.1/Section 508 (US)/Web Accessibility Standard (NZ)/good practices/etc whenever I can 😬
I tried using em during the Bootstrap 5 work, but the final result was different than Bootstrap 3, so it was simpler to just copy the values from Bootstrap 3. I think for now we should use this 20px, and if we need to support accessibility standards like WCAG we can create a new issue later and see what's required (I think Europe adopted WCAG 2.1 too, but I only worked with a11y in NZ & Brazil).

[osma]

Ah right, thanks for the clarification and example. I first thought that you were commenting on the pixel value used in this PR just for a single icon, but this is a much more general issue which affects many elements in the Skosmos UI.

In fact we do have a requirement to follow WCAG level AA, or at least to document any deviations from it (there are many known a11y problems - and likely many unknown - in current Skosmos, unfortunately). There is an accessibility statement for Finto - in Finnish only - which contains a long list of known problems as well as aspects that have not been verified.

The best solution would probably be to avoid px sizes for fonts altogether. But implementing that should be planned in an issue and implemented as a PR (or several).

[kinow]

Agreed! 👍 😀 Thanks @osma

[osma]

Turns out that we need the Font Awesome Solid set as well for some Skosmos widgets, so I will need to adjust this PR to include that as well.

[sonarcloud]

SonarCloud Quality Gate failed.   

2 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication