EMBL-EBI Icon fonts for the life sciences
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-Commonthat 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
- 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:
- 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
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
We are using a semantic versioning style of releases.
|Major release||Minor release||Note|
|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.)
- Clone the repo
npm installand 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
- Build the files by running the Gruntfile.js tasks with:
gruntmaster build of all below tasks
grunt webfontgenerate the webfont files
grunt grunticonmake the png static files
grunt copycopy svg source files into font static files
grunt webfont && grunt includesregenerate the HTML templates
- Optional tasks
grunt svgminminify svg source files
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'
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.