Icons

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

Planning underway to improve the EBI Icon fonts

If you're interested in making improvements to the technical delivery and usage of the EBI Icon fonts.

Learn more

Icons are added by the fonts.css file with :before pseudo elements, 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><i class="icon icon-generic" data-icon="4"></i> Travel by plane</h4>.

A plane is a nice demo icon

The web browser will read the data-icon parameter and use the icon pictogram corresponding to "4".

The EBI Visual framework no longer adds automatic padding to icons (in most scenarios), if you want to add padding, use the helper classes or add .icon-spacer to the .icon's element.

We do not recommend using PNG images as they offer inferior performance and inferior support for high resolution screens.

Looking for an icon?

View the gallery

Icons HTML

<div class="callout">
  <h3><i class="icon icon-generic padding-right-medium" data-icon="i"></i>Planning underway to improve the EBI Icon fonts</h3>
  <p>If you're interested in making improvements to the technical delivery and usage of the EBI Icon fonts.</p>
  <p><a href="https://github.com/ebiwd/EBI-Icon-fonts/issues/6" class="readmore">Learn more</a></p>
</div>

<p>Icons are added by the <code>fonts.css</code> file with <code>:before</code> pseudo elements, 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. <code>&lt;h4&gt;&lt;i class="icon icon-generic" data-icon="4"&gt;&lt;/i&gt; Travel by plane&lt;/h4&gt;</code>.</p>

<h4><i class="icon icon-generic icon-spacer" data-icon="4"></i>A plane is a nice demo icon</h4>

<p>The web browser will read the data-icon parameter and use the icon pictogram corresponding to "4".</p>

<p>The EBI Visual framework no longer adds automatic padding to icons (in most scenarios), if you want to add padding, use the <a href="https://ebiwd.github.io/EBI-Pattern-library/patterns/helper-classes/">helper classes</a> or add <code>.icon-spacer</code> to the <code>.icon</code>'s element.

<p>We do not recommend using PNG images as they offer inferior performance and inferior support for high resolution screens.</p>

<p>Looking for an icon?</p>

<a href="//www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.1/" class="button readmore">View the gallery</a>

Icons Style

You can find the original source of the CSS as .scss

Icons

  • Last updated: 27 Jun 2016
  • Source

Have a use case that's not covered?

Please open an issue in the tracker. We'll update this living pattern library with your feedback.

All patterns

See also

These resources will help you engage and understand the EBI Framework.