EBI Website Guidelines

Icons can be a useful way to lend emphasis to a piece of text or to represent a particular item or action.

We have developed a range of icon fonts and all of the icons are also available as PNG files. 

How to use iconfonts

The ebi-visual.css stylesheet automatically loads a range of icon fonts that you can use. 

Icons are added 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. <h2 class ="icon icon-generic"  data-icon ="A">Travel</h2>. 

This will simply tell the web browser to use the icon pictogram that corresponds to the letter "A", and place it before the heading "Travel".

Which CSS classes you need to use

"Generic" icon font: icon-generic
"Chemistry" icon font: icon-chemistry
"Functional" icon font: icon-functional
"Social media" icon font: icon-socialmedia
"Conceptual" icon font: icon-conceptual
"Species" icon font: icon-species

To know which keystrokes map to which icons, please refer to the approripate folder within the font directory. 

Icons as images

Using iconfonts in web applications might be more difficult and it might not always be appropriate (see below). If this is the case, then you can always use individual PNG images files for each icon.

You can link to these at http://www.ebi.ac.uk/web_guidelines/images/icons/

When to use iconfonts and when to use icon images

Use icons from an iconfont when you can put the icon next to a piece of descriptive text. 

Use icon images when they are clearly self-explanatory and can stand alone, and when having an image as an inline part of your page content is appropriate.