ebiwd / ebi-icon-fonts

A collection of functional and scientific icons for EMBL-EBI sites.

EMBL-EBI Icon fonts for the life sciences

View all the icons and usage information at this gallery.

Reference the fonts.css stylesheet automatically loads a range of icon fonts that you can use.

Icons are added automatically through CSS using the :before feature in CSS, so they will appear before whatever piece of text you associate them with. To make this association, you need to include particular class and data-icon attributes in the relevant HTML element: e.g. <h4><span class="icon icon-generic" data-icon="4"></span> Travel by plane</h4>.

What's new in v1.3?

This version brings the most user-facing changes in several years as we've added in far more "common" icons and simplified the font stack.

• A new EBI-Common that supersedes EBI-Social, EBI-Generic, EBI-Functional and adds Font Awesome icons
• The new version is a backwards compatible release, just point your css include to https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css
• v1.3 and onwards are only available on the ebi.emblstatic.net CDN
• New icons are only added to the current version (v1.3) and are not added to v1.1 or v1.2
• We now show the escaped unicode and along with its rendered variant in the gallery:
  • data-icon="&#x61" and data-icon="&#x61"
• You are able to select icons by data attributes and classes
  • class="icon icon-generic icon-alert" and class="icon icon-generic" data-icon="l"
• We now send over only the woff and woff2 formats
• See also issues #22, #21

View all the icons and usage information at this gallery.

Need a new icon?

If you're in need of an icon for a squirrel, bucket, or something useful: use this form.

Want to fork an icon?

PR welcome. And if you want to fork a Font Awesome icon, see EBI-Icon-fonts/source/common/font-awesome/README.md

Using these fonts in your project

• Releases are homed at https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/
• You can load the default CSS by linking to the v1.3 release at https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css
• NPM users can get the code from npmjs.com/package/EBI-Icon-fonts
• React users that are working with the EBI Species icons should check out wbazant/react-ebi-species
• We suggest using with the EBI Visual Framework v1.3, but older versions work -- and you don't even really need to use the EBI Visual Framework at all.
• Need desktop fonts? Get them from the Style Lab.

Code structure, developing the fonts

Versioning

We are using a semantic versioning style of releases.

Major release	Minor release	Note
(Branch)	(Tag)
1.1	.0	Initial major release
"	.1	Tagged minor release
"	.2	Tagged minor release
"	.3	Tagged minor release
1.2	.0	Documented, breaking release
"	.1	Tagged minor release
1.3	.0	Documented, breaking release

Difference between major, minor releases:

• Major releases (1.1, 1.2, 1.3...) can have breaking changes and any such changes will be detailed and tested.
• Minor releases (0.0.X) will not have changes to code structure or parts and will mainly add features or update visual assets (such as logos or icon fonts).

Building the icon fonts

The git repo does not contain the compiled font assets. If you're a developer looking to compile/edit/tweak the font from its source files, here's what you need to do.

(NOTE: Only developers would have the need do this.)

1. Clone the repo
2. Run npm install and you may also need to (Mac oriented commands)

• npm install grunt-cli -g
• install brew: https://brew.sh/
• install grunt-webfont dependencies: https://github.com/sapegin/grunt-webfont#installation

3. Build the files by running the Gruntfile.js tasks with:

• grunt master build of all below tasks
• grunt webfont generate the webfont files
• grunt grunticon make the png static files
• grunt copy copy svg source files into font static files
• grunt webfont && grunt includes regenerate the HTML templates

4. Optional tasks

• grunt svgmin minify svg source files

Docker build

Build the fonts with the docker image (as used by gitlab) as follows docker run -it --rm -v $PWD:/workspace -w /workspace ebiwd/node-fontforge-grunt:6 sh -c 'npm install && grunt'

Licensing

EMBL-EBI created icons and the project are licenced under an Apache 2.0 and Creative Commons Attribution-ShareAlike 4.0. Non-EMBL-EBI created elements are licenced under their indicated licence. For more information, see LICENSE.md

This project also uses Font Awesome icons, those icons are licenced as specified in the respective LICENSE.txt.

ebi-icon-fonts's Issues

Font support for desktop

While th EBI Icon Fonts are usable on desktop, from v1.1 onwards they no longer have the ligature support (typing c+a+t=cat icon) and you can't search by icon name.

This is probably an issue in how we're using FontForge and grunt-webfont -- I've had a look in the issuequeue (and google) but haven't found anything similar: https://www.npmjs.com/package/grunt-webfont

Urgent! - Old font files not available

Font files served from -
https://www.ebi.ac.uk/web_guidelines/fonts/EBI-Generic/fonts/*
are not available.

All of the PDBe older applications are impacted.

Use only woff+woff2

The latest approach to font serving are to use just woff and woff2 -- as this covers virtually all browsers. This should help reduce file size and keep things tidy.

Proposed change map:

• Begin generating woff2 (we already have woff)
• Add woff2 to fonts.css
• Remove svg/eot/ttf from fonts.css

I'd say we can continue generating svg/eot for any sites that may need them. And we need to continue ttf for desktop needs.

Size difference with icon-functional or icon-generic

I wanted to use buttons with icons and whilst implementing it, it seemed that either icon-functional or icon-generic are influencing the size of the button.

You can see that the Basket button is bigger then the other.

Map species icons to Ensembl species names as well as to their common names

Okay this issue is just a shameless plug for
https://github.com/wbazant/react-ebi-species

To use icons programmatically we needed to curate the mapping of Ensembl species to the right icons. We use it on the differential results page among other places: http://www.ebi.ac.uk/gxa/genesets/GO:0008344#differential

font does not render in the breadcrumb

when using icon font in the breadcrumb, font does not render correctly when a lower case data-icon is used

Replacing Helvetica Neue as the main font

This repo — somewhat confusingly — also contain the typeface we need for EMBL-EBI "brand compliance": Helvetica Neue.

The move from Verdana in the new EBI Visual Framework has largely been a big success, however there is still work to be done.

The biggest among them is that Helvetica Neue does not work well on all Windows browsers.

From a recent ticket:

• The vertical alignment is different between Chrome on Windows and Chrome on Mac OSX causing a misalignment with the title icons.
• Some letters aren't rendering well on Chrome on Windows.

There are at least three ways to approach this:

1. Use a different font on Windows (Liberation Sans/Arimo is a popular choice)

• Pro: Looks good on Mac, looks good on Windows
• Con: Not branding compliant, alters the experience between platforms, fragments testing

2. Just use Liberation Sans/Arimo everywhere

• Pro: Consistent experience and it's an open source font
• Con: Not branding compliant

3. "Fix" Helvetica Neue

• Pro: Consistent experience
• Con: No one really knows how to do this, needs more investigation!

4. Do nothing

• Pro: Branding compliant
• Con: Leaves windows a bit wonky

Either way, this sort of change would likely need to be done in v1.2 of the Icon Fonts and Framework, so it's a target for summer 2017.

EBI Icon font wishlist

If you're interested in improvements to the technical delivery and usage of the EBI Icon fonts, please add a comment here.

Improving this repo was discussed at the November and December Web Guidelines Committee and a meeting on the subject is expected to occur in the coming weeks.

A few examples for consideration:

• Bundling the multiple icon files into fewer
• Adding more varieties of icons
• Splitting the same icon across multiple terms (allows more flexibility in future changes)
• SVG delivery
• Ability to use an icon as an image
• Improving the Illustrator to font workflow

Add .icon-space class

(Posting on behalf of Ardan Patwardhan after an e-mail conversation.)

Gist is that, as icons no longer force a default amount of right-side spacing, an optional icon-space class would be semantically useful.

It would echo the utility spacing pattern of https://ebiwd.github.io/EBI-Pattern-library/patterns/spacing/ but be more narrow in scope.

Question: Do we assume it will always be right-side spacing? Or do we have a more verbose icon-space-right syntax?

Remove need for .fontface class in <html> element

When I was trying to use this repo I noticed it requires that the html element has the fontface class, which I believe is added by modernizr, however we are not using it modernizr, and think this there is unnecessary, among other things because font face is supported by all the major browsers.

I know from our side is as simple as adding that class into the html, but I thought of mention it as it can create issues for those that want to use this repo. At last it should be mention in the Readme.

Thanks,
Gustavo.

Add marmoset icon to species

Spencer has made a new marmoset icon and we should add it to the species.

Screenshot below, SVG attached as ZIP.

Marmoset.svg.zip

Generic-reviewed icon do not render properly

Please, check out the attached image. The reviewed icon from the generic set do not render properly.

Integrate Font Awesome selection of icons

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

Link to use this form doesn't work on my side

Need a new icon? link (introduction text - Need a new icon section) doesn't work on my side... asking for permission

Icon code snippets with class are wrong

The examples on the Style lab webpage say the usage is:
<i class=".icon-ebi icon-address-book"></i>
when it should be:
<i class='icon icon-common icon-address-book'></i>

Or at least that's what I've gathered from poking around in the CSS file.

Improve accessibility of icons for screen readers

Where an icon has been used an aria-label is not present, we should hide the icon from screen readers.

Proposed code:

@media speech {
  .icon.icon-common:not([aria-label]),
  .icon.icon-socialmedia:not([aria-label]),
  .icon.icon-species:not([aria-label]),
  .icon.icon-generic:not([aria-label]),
  .icon.icon-fileformats:not([aria-label]),
  .icon.icon-functional:not([aria-label]),
  .icon.icon-chemistry:not([aria-label]) {
    display:none;
  }
}

Thanks to @esanzgar for spurring this one.

v1.3 roadmap, ideas

With the forthcoming release of the EBI Visual Framework v1.3, we're looking to roll a v1.3 of the EBI Icon Fonts.

These won't be peer dependencies, but they would pair nicely.

What's on offer:

• More icons at last! The request backlog is long, and we're overdue to add some useful functional icons (up/down, full screen, file icons and so on). We're consolidating common fonts into EBI-Common and adding non-redundant FontAwesome icons. #22
• Availability as a class. Currently you must use a data-icon="" attribute, would also be good to expose the class, class="icon icon-generic icon-generic-handshake
• Under the hood pipeline improvements, such as getting the gallery onto the EBI Style Lab
• Drop all but WOFF/WOFF2 #17

Bumped to v1.4:

• Semantic variants: i.e. The industry icon should only be use for "industry", for other cases we should make available as "handshake"

Other requests? Ideas? Comment? Add them below.

See the demo: https://www.ebi.ac.uk/style-lab/general/fonts/v1.3/

Helvetica Neue on Windows

When moving from the EBI Compliance to EBI Visual Framework we dropped the combo of Helvetica Neue for headers and Verdana for body text in favour of Helvetica Neue everywhere.

1. This is good as it is more consistent and matches our EMBL-EBI visual guidelines for print.
2. This is bad as Helvetica Neue has issues on Windows (see: twbs/bootstrap#13823)

So we have three courses of action:

1. Correct the issues in Windows -- and it's unclear if this is fully fixable
2. Use a different font in Windows
3. Drop Helvetica Neue for another font -- there has been discussion about using a serif font for body text, but serif or not this requires discussion

N.b. Issue stems from a problem noticed in a Training project.

Icon request: A 3D protein structure

While we have a 2d structure icon (https://www.ebi.ac.uk/style-lab/general/fonts/v1.2/#EBI-Conceptual), the PDBe team has noted that it is useful to indicate 3d structures and have requested an icon.

This conversation has been happening over e-mail; but there are two large approaches:

1. 3D Modifier: create a generic "3d" icon and pair this with the existing 2d structure. This could be a more scannable approach, but might require the user to learn how we use icons.
2. 3D Literal: Just make 3d version of the current 2d icon. This is rather straightforward, but there is some concern if the difference will be noticeable at small size.

Here's a sketch of various approaches:

The "3D Literal" is the favoured option for now and we plan to test in the development version of the EBI Icon Fonts v1.3.

EBI icon and Globe symbols do not render well

Issue is most prominent at smaller (~13px) sizes.

SVG version of the download icon (at least)

Hi I would need a stable link to the EBI download icon (SVG format) to replace the default icon used in Highchart where we can use only link to icon and no css-font related. Do you think we can get that soonish?

Thanks a lot

Ability to download the FileFormats icons font

In the gallery here: https://www.ebi.ac.uk/style-lab/general/fonts/v1.3/ there are icons related to file formats, but this font isn't available to download in the Download to your computer list in the top right of the page. Is there some way of accessing the FileFormat font?

font files missing

Unable to test the release candidate code because of missing font files (imported in font.css)

Error FYR :

./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/EBI-Icon-fonts/fonts.css
Module not found: Error: Can't resolve './EBI-Chemistry/fonts/EBI-Chemistry.eot' in '..\node_modules\EBI-Icon-fonts'
 @ ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/EBI-Icon-fonts/fonts.css 6:4734-4784 6:4808-4858
 @ ./~/EBI-Icon-fonts/fonts.css
 @ multi ./~/ebi-framework/libraries/foundation-6/css/foundation-lite.min.css ./~/ebi-framework/css/ebi-global.css ./~/EBI-Icon-fonts/fonts.css ./src/md-pdbe-theme.scss ./src/styles.css

New file icons

It would be great to have a 'PSI-MI JSON' and a 'PSI-MI ComplexTab' icon.

What's the deal with Garmond?

We load it by @font-face in fonts.css line 1-7 and again with an @import at line 22

On top of loading it twice, is it even used anywhere? Is this a bit of cruft from years past?

Old icon images missing

Similar to - #30

Example - https://www.ebi.ac.uk/web_guidelines/images/icons/EBI-Functional/Functional%20icons/expand.png

Icons in custom web components

Hi,

I'd like to use the EBI icons in web components. However, I realized that the CSS selector has a html prefix to match the parent html tag. It seems that in a shadow root, the html is not seen, hence the respective CSS class is not applied.

The problem is fixed by removing the html element selector i.e.:

html i.icon-chemistry,
html input.icon-chemistry,
html .icon-chemistry:before {
  font-family: 'EBI-Chemistry';
}

to

i.icon-chemistry,
input.icon-chemistry,
 .icon-chemistry:before {
  font-family: 'EBI-Chemistry';
}

Any comments on this?

Baboon ("8") is missing in the EBI species font gallery

Fix deployment

No longer deploying to VMs, only AWS

see #32 #33 #34

Replace link of React package

In the main fonts page, could you change the link for React users so that it points at the NPM published package, https://www.npmjs.com/package/react-ebi-species, instead of the GitHub repo?

Can this be published in npm?

Hey there is it possible to put this on npm, so we can manage the versioning of it.
Thanks.