Erudus Extended Icon Font - ReadMe & Usage

Dave Liske, Luna Pier, Michigan. December 2018.
www.micuisine.com

The Erudus Extended Icon Font and its included CSS, implented without any further dependencies, allows for the selection of either a 32px or a (recommended) 50px font size for an extended set of the Erudus icons for diet types and allergens, from Erudus: The Food Industry’s Collaborative Solution to Sharing Product Data, West Yorkshire, UK.

The License

Erudus icons and icon font are licensed under the MIT License: https://opensource.org/licenses/mit-license.html

Copyright 2017 Erudus Limited

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Description

Erudus Ltd's original design notes are as follows:

The Erudus Food Allergy Icon Font is designed to help designers and developers provide a pixel perfect solution, aiding users to quickly and easily identify in a graphical format whether a food product contains or may contain any of the EU’s 14 Major Food Allergens. (as outlined in the EU Food Information for Consumers Regulation No. 1169/2011 and EU Food Information Regulation 1169/2001).

At the time of publication, no standardised approach to the graphic representation of the presence of allergen ingredients in food products has been agreed. Various icons and visual representations are being used across the food industry.

In the US the Food & Drug Administration (FDA) regulates the presentation of information regarding eight of the same allergens, referred to colloquially as the "Big Eight", in the Food Allergen Labeling and Consumer Protection Act of 2004

I have extended the Erudus Food Allergy Icon Font to include other known allergies, diet and cuisine types, and popular icons for menu item spiciness designations.

Disclaimers

  1. Certification is required to claim an item fulfills the requirements of some of the included cuisines, that the kitchen follows the requirements for those cuisines, and for the specific usage of some of the Cuisine icons.

  2. Caution must be exercised when dealing with allergen information, so it is important to take great care in using these icons.

  3. The author is not responsible for any usage claims and/or the certification required for the use of these icons by any entity or establishment.

The Extensions

One of the hurdles I first had to tackle was the font developers' usage of the Bootstrap 3.3.7 CSS for the display of information labels, etc. The usage of Bootstrap within, say, a Wordpress plugin wreaks havoc on theming both within the Admin pages of the site, and in the presentation of pages to the user. However, I felt it was important to retain the specific presentation method. As a result, the necessary portions of the Bootstrap CSS were recreated within the CSS for the Erudus extended font to create a standalone CSS which doesn't require outside dependencies and also doesn't cause presentation issues with other CSS on a site.

One other aspect of the original Erudus font CSS that was redeveloped was an apparently unused and untested smaller 32px sizing. It's recommended on Erudus' own site that the font only be presented in a 50px size, so it's possible the 32px size was scratched in favor of the larger sizing. We've included both the 50px and 32px sizes within this distribution as the smaller size may be more appropriate in some usages.

The complete extended icon set is displayed at the bottom of this page in both the 32px and 50px sizes.

The following characters, shown here in the 50px font size, have been added to the Erudus font:

Spiciness Characters

Suitable For

Gluten Free
Antibiotic Free
Non-GMO
Organic

Gluten Free
Antibiotic Free
Non-GMO
Organic

Contains May Contain

Alpha-Gal
Corn
MSG
Nightshade
Trans Fat

Alpha-Gal
Corn
MSG
Nightshade
Trans Fat

Using The Extended Erudus Font

Basic Concepts

The cascading style sheet (CSS) must first be linked in the <head> section of the page, with the correct relative path included:

<link rel="stylesheet" href="../css/erudus_extended_style.css">

The layout of the labeling of the blocks the icons are displayed in is accomplished within the CSS, derived from the Bootstrap CSS. The blocks also include the color keys for what the icons represent.

For the Cuisine icons:

<div class="erudus-legend-background"><p><span class="erudus-legend erudus-suitable">Suitable For</span></p>
<!-- Icons are included here -->
</div>

Suitable For

For the Allergen icons ... Note the space between the Contains and May Contain <span> tags:

<div class="erudus-legend-background"><p><span class="erudus-legend erudus-contains">Contains</span> <span class="erudus-legend erudus-may-contain">May Contain</span></p>
<!-- Icons are included here -->
</div>

Contains May Contain

The characters within the Erudus font are located within the e900 area. The developers were thoughtful enough to provide an English language translation mechanism within their original CSS in the form of tags. I extended the font within that same e900 area, and extended the Erudus tags to match.

ICON TAG ICON TAG ICON TAG
eicon-pepper
eicon-pepper-outline
Gluten Free
eicon-gluten-free
Alpha-Gal
eicon-alpha-gal
Alpha-Gal
eicon-circle-alpha-gal
Antibiotic Free
eicon-antibiotic-free
Celery
eicon-celery
Celery
eicon-circle-celery
Non-GMO
eicon-non-gmo
Cereal
eicon-cereal
Cereal
eicon-circle-cereal
Halal
eicon-halal
Corn
eicon-corn
Corn
eicon-circle-corn
Kosher
eicon-kosher
Crustaceans
eicon-crustaceans
Crustaceans
eicon-circle-crustaceans
Organic
eicon-organic
Eggs
eicon-eggs
Eggs
eicon-circle-eggs
Vegan
eicon-vegan
Fish
eicon-fish
Fish
eicon-circle-fish
Vegetarian
eicon-vegetarian
Gluten
eicon-gluten
Gluten
eicon-circle-gluten
Gluten Free
eicon-circle-gluten-free
Lupin
eicon-lupin
Lupin
eicon-circle-lupin
Antibiotic Free
eicon-circle-antibiotic-free
Milk
eicon-milk
Milk
eicon-circle-milk
Non-GMO
eicon eicon-circle-non-gmo
Molluscs
eicon-molluscs
Molluscs
eicon-circle-molluscs
Halal
eicon-circle-halal
MSG
eicon-msg
MSG
eicon-circle-msg
Kosher
eicon-circle-kosher
Mustard
eicon-mustard
Mustard
eicon-circle-mustard
Organic
eicon-circle-organic
Nightshade
eicon-nightshade
Nightshade
eicon-circle-nightshade
Vegan
eicon-circle-vegan
Peanuts
eicon-peanuts
Peanuts
eicon-circle-peanuts
Vegetarian
eicon-circle-vegetarian
Sesame
eicon-sesame
Sesame
eicon-circle-sesame
Soya
eicon-soya
Soya
eicon-circle-soya
Sulfur Dioxide
eicon-so2
Sulfur Dioxide
eicon-circle-so2
Trans Fat
eicon-transfat
Trans Fat
eicon-circle-transfat
Tree Nuts
eicon-nuts
Tree Nuts
eicon-circle-nuts

The display of an icon is set up as a class. The "eicon" tag is included within the class to invoke the font, and the tag for the desired icon is then also included. For example:

<div><span class="eicon eicon-circle-peanuts"></span></div>

Note that the default color for the characters in the Erudus font is a greyscale defined within the CSS.

The size of the displayed character is then defined in the use of one of two enclosing tags. A legend for the character is displayed in a separate <div> tag. An outer tag invoking "eicon-small" wraps the smaller version to also resize the legend.

<div class="eicon-display "><div><span class="eicon eicon-circle-peanuts"></span></div><div><span>Peanuts</span></div></div>

Peanuts

<div class="eicon-small">
<div class="eicon-display-small "><div><span class="eicon eicon-circle-peanuts"></span></div><div><span>Peanuts</span></div></div>
</div>

Peanuts

Note that the space after "eicon-display" or "eicon-display-small" within the character's tags is required.

Invoking the correct color for the desired information display involves including one more tag within the character's tag, immediately after the space described in the previous sentence.

For the Cuisine icons ... Note the space before and after the "suitable-level-yes" tag, which provides the color scheme:

<div class="erudus-legend-background"><p><span class="erudus-legend erudus-suitable">Suitable For</span></p>
<div class="eicon-display suitable-level-yes "><div><span class="eicon eicon-circle-kosher"></span></div><div><span>Kosher</span></div></div>
</div>

Suitable For

Kosher

<div class="eicon-small">
<div class="erudus-legend-background"><p><span class="erudus-legend erudus-suitable">Suitable For</span></p>
<div class="eicon-display-small suitable-level-yes "><div><span class="eicon eicon-circle-kosher"></span></div><div><span>Kosher</span></div></div>
</div>
</div>

Suitable For

Kosher

For the Allergen icons ... Note the space before and after the "allergen-level-yes" and "allergen-level-may" tags, which provide the color scheme:

<div class="erudus-legend-background"><p><span class="erudus-legend erudus-contains">Contains</span> <span class="erudus-legend erudus-may-contain">May Contain</span></p>
<div class="eicon-display allergen-level-yes "><div><span class="eicon eicon-circle-peanuts"></span></div><div><span>Peanuts</span></div></div>
<div class="eicon-display allergen-level-may "><div><span class="eicon eicon-circle-peanuts"></span></div><div><span>Peanuts</span></div></div>
</div>

Contains May Contain

Peanuts
Peanuts

<div class="eicon-small">
<div class="erudus-legend-background"><p><span class="erudus-legend erudus-contains">Contains</span> <span class="erudus-legend erudus-may-contain">May Contain</span></p>
<div class="eicon-display-small allergen-level-yes "><div><span class="eicon eicon-circle-peanuts"></span></div><div><span>Peanuts</span></div></div>
<div class="eicon-display-small allergen-level-may "><div><span class="eicon eicon-circle-peanuts"></span></div><div><span>Peanuts</span></div></div>
</div>
</div>

Contains May Contain

Peanuts
Peanuts

The Extended Erudus Font

Full Size - 50px

Spiciness Characters

Suitable For

Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian
Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian

Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian
Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian

Contains May Contain

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Small Size - 32px

Spiciness Characters

Suitable For

Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian
Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian

Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian
Gluten Free
Antibiotic Free
Non-GMO
Halal
Kosher
Organic
Vegan
Vegetarian

Contains May Contain

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts

Alpha-Gal
Celery
Cereals with Wheat
Corn
Crustaceans
Eggs
Fish
Gluten
Lupin
Milk
Molluscs
MSG
Mustard
Nightshade
Peanuts
Sesame
Soya
Sulfur Dioxide
Trans Fat
Tree Nuts