Integrate Font Awesome selection of icons

[khawkins98]

Many (most?) teams have need to make use of a wider selection of icons, so rather than piece-by-piece adding similar icons, maybe we should just integrate Font Awesome.

There's at least three ways we could do this:

Method	Pro	Con
A. Just use Font Awesome	Simple, compatible	We get everything as is, so it's extra bloat and we can't EBI-ify any icons
B. Add FA to existing EBI-Functional	We use existing infrastructure; we can override look/feel of icons	Font awesome short codes don't work
C. Add a new font, EBI-Functional-extras	We can override look fell, utilise FA class names	Will become a bit confusing if/when look differs substantially from FA
D. Add a new font, EBI-Functional2 (existing EBI-Functional becomes legacy)	We can override look fell, utilise FA-inspired class names	Might be a bit confusing for teams on how/when to switch

[khawkins98]

My leaning is to do option "D"; we could:

1. Make a new EBI-Functional2 foldeer
2. Import existing configuration
3. Merge in these SVGs from FA (we'd leave out the brands as we already have social icons) https://github.com/FortAwesome/Font-Awesome/tree/master/advanced-options/raw-svg/solid
4. We'd still use the same FA icon names, just the namespacing would be different fas fa-save -> icon-functional2 icon-functional2-save

[khawkins98]

Thinking on this further, there's additional ways we could do this better.

It's always been a source of confusion having EBI-Functional (actions) and EBI-Generic (things). The line isn't always clear what belongs where, or where a user should look for a save icon (is a save a thing or action?)

So, in v1.3 we could:

1. Keep EBI-Functional, EBI-Generic, EBI-Social as-is for legacy support.
2. Make a new "EBI-Common" font that has all the above + font awesome
   • merge generic, social, functional fonts into EBI-Common
   • pipe SVG/PNG assets into EBI-Common distro
   • serve new EBI-Common fron fonts.css
   • update documentation at https://wwwdev.ebi.ac.uk/style-lab/general/fonts/v1.3/
   • begin v1.4 planning to remove now legacy and redundant Generic, Functional, Social
   • change some existing keycodes (as I'm sure we've assigned "A" in more than one font)
   • select FontAwesome icons
   • merge FontAwesome icons
   • somehow indicate/track which are from FontAwesome (licensing)

Why?

1. It makes using v1.3 and onwards much simpler: if you want a common web icon, use EBI-Common
2. Allows us to control how we want icons to look over just using FontAwesome from the source + we can add additional icons
3. We don't change/alter existing fonts for legacy sites

How?

• For v1.3 we would serve all the fonts in fonts.css
• From v1.4 we could omit the "legacy" from fonts.css and add a fonts-legacy.css

Other things:

• Consider how this will work on desktop machines (Word, et al.)

[khawkins98]

The Generic, Functional and Social icons have been merged into EBI-Common; you can see the changes at https://wwwdev.ebi.ac.uk/style-lab/general/fonts/v1.3/

Up next is selecting icons from FontAwesome and adding them in.

[khawkins98]

After discussing at the May Web Guidelines Committee, we're approaching this integration from a new angle:

This achieves a few things:

1. Users that don't want to change from existing setup can continue using an unchanged EBI-Functional and EBI-Generic
2. Preserve FontAwesome key codes as they have often become a de facto standard
3. Allows us to improve or remove redundant FontAwesome icons
4. We can mix in the best bits of the existing Functional, Generic icon sets into EBI-Common
5. Users interested in performance can fully migrate to EBI-Common

Reminder: the scientific icon sets would remain unaltered.

[khawkins98]

After conversation at the July WGC meeting, we'll do a few actions that relate specifically to this issue.

• Have a second look to trim out any redundant or not-needed icons
• Not showcase EBI-Functional and EBI-Generic, to drive adoption of EBI-Common
• While we say in the source code that we're using FontAwesome, we'll also mention it in the README.md and on the EBI Style Lab page

And in general, we'll make it a point to better communicate the alpha status of products.

After that, we're probably ready for a beta.