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.
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.
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.
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.
Caution must be exercised when dealing with allergen information, so it is important to take great care in using these icons.
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.
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
Contains May Contain
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
PeanutsPeanuts<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
PeanutsPeanutsThe Extended Erudus Font
Full Size - 50px
Spiciness Characters
Suitable For
Gluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarianGluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarian
Gluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarianGluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarianContains May Contain
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree NutsSmall Size - 32px
Spiciness Characters
Suitable For
Gluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarianGluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarian
Gluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarianGluten FreeAntibiotic FreeNon-GMOHalalKosherOrganicVeganVegetarianContains May Contain
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts
Alpha-GalCeleryCereals with WheatCornCrustaceansEggsFishGlutenLupinMilkMolluscsMSGMustardNightshadePeanutsSesameSoyaSulfur DioxideTrans FatTree Nuts