Using The Erudus Extended Allery Icon Font

In the CSS, 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 Warning and Caution 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">Warning</span> <span class="erudus-legend erudus-may-contain">Caution</span></p>
		<div class="eicon-display allergen-level-yes "><div><span class="eicon eicon-circle-hot-plate"></span></div><div><span>Hot Plate</span></div></div>
		<div class="eicon-display allergen-level-may "><div><span class="eicon eicon-circle-hot-plate"></span></div><div><span>Hot Plate</span></div></div>
		</div>

Warning Caution

Hot Plate

Hot Plate

<div class="eicon-small">
		<div class="erudus-legend-background"><p><span class="erudus-legend erudus-contains">Warning</span> <span class="erudus-legend erudus-may-contain">Caution</span></p>
		<div class="eicon-display-small allergen-level-yes "><div><span class="eicon eicon-circle-hot-plate"></span></div><div><span>Hot Plate</span></div></div>
		<div class="eicon-display-small allergen-level-may "><div><span class="eicon eicon-circle-hot-plate"></span></div><div><span>Hot Plate</span></div></div>
		</div>
		</div>

Warning Caution

Hot Plate

Hot Plate

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

For the HACCP icons ... Note each icon is provided with its own associated color, maintaining industry standards:

<div class="erudus-legend-background"><p><span class="erudus-legend erudus-haccp">HACCP</span></p>
		<div class="eicon-display haccp-level-bread "><div><span class="eicon eicon-haccp-bread"></span></div><div><span>Ready To Eat</span></div></div>
		<div class="eicon-display haccp-level-dairy "><div><span class="eicon eicon-haccp-dairy"></span></div><div><span>Dairy</span></div></div>
		<div class="eicon-display haccp-level-fish "><div><span class="eicon eicon-haccp-fish"></span></div><div><span>Fish</span></div></div>
		<div class="eicon-display haccp-level-meat "><div><span class="eicon eicon-haccp-meat"></span></div><div><span>Raw Meat</span></div></div>
		<div class="eicon-display haccp-level-poultry "><div><span class="eicon eicon-haccp-poultry"></span></div><div><span>Raw Poultry</span></div></div>
		<div class="eicon-display haccp-level-vegetables "><div><span class="eicon eicon-haccp-vegetables"></span></div><div><span>Vegetables & Fruit</span></div></div>
		</div>

HACCP

Ready To Eat

Dairy

Fish

Raw Meat

Raw Poultry

Vegetables & Fruit

<div class="eicon-small">
		<div class="erudus-legend-background"><p><span class="erudus-legend erudus-haccp">HACCP</span></p>
		<div class="eicon-display-small haccp-level-bread "><div><span class="eicon eicon-haccp-bread"></span></div><div><span>Ready To Eat</span></div></div>
		<div class="eicon-display-small haccp-level-dairy "><div><span class="eicon eicon-haccp-dairy"></span></div><div><span>Dairy</span></div></div>
		<div class="eicon-display-small haccp-level-fish "><div><span class="eicon eicon-haccp-fish"></span></div><div><span>Fish</span></div></div>
		<div class="eicon-display-small haccp-level-meat "><div><span class="eicon eicon-haccp-meat"></span></div><div><span>Raw Meat</span></div></div>
		<div class="eicon-display-small haccp-level-poultry "><div><span class="eicon eicon-haccp-poultry"></span></div><div><span>Raw Poultry</span></div></div>
		<div class="eicon-display-small haccp-level-vegetables "><div><span class="eicon eicon-haccp-vegetables"></span></div><div><span>Vegetables & Fruit</span></div></div>
		</div>
		</div>

HACCP

Ready To Eat

Dairy

Fish

Raw Meat

Raw Poultry

Vegetables & Fruit