Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate Font Awesome selection of icons #22

Closed
khawkins98 opened this issue Feb 20, 2018 · 5 comments
Closed

Integrate Font Awesome selection of icons #22

khawkins98 opened this issue Feb 20, 2018 · 5 comments
Milestone

Comments

@khawkins98
Copy link
Contributor

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
Copy link
Contributor Author

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 khawkins98 added this to the v1.3 milestone Feb 20, 2018
@khawkins98
Copy link
Contributor Author

khawkins98 commented Feb 23, 2018

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 added a commit that referenced this issue Feb 25, 2018
Merges  social, generic, functional. Functional key codes are
unchanged.
khawkins98 added a commit that referenced this issue Feb 25, 2018
khawkins98 added a commit to ebiwd/EBI-Style-lab that referenced this issue Feb 25, 2018
@khawkins98
Copy link
Contributor Author

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 khawkins98 mentioned this issue Feb 25, 2018
5 tasks
khawkins98 added a commit that referenced this issue Feb 26, 2018
Still need to check for more duplicates, and conflicting key codes
@khawkins98
Copy link
Contributor Author

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

image

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
Copy link
Contributor Author

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.

khawkins98 added a commit that referenced this issue Jul 6, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant