Basic HTML & CSS Configurations

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">
Linking to the CSS is only slightly more of a problem when using the icon font with Wordpress. Modifying the header.php file in a Wordpress theme isn't recommended because further updates to the theme will overwrite the modification. There are two solutions to this:
  1. Implement a Child Theme for the Wordpress theme you're using, and include the CSS link in the Child Theme's header.php file.
  2. Use a theme which allows for additions to the header.php file via Settings in the Theme Options.
For example, in my own Luna Pier Cook blog I created the folder Fonts in the root folder of the blog and uploaded the Erudus Extended Allergy Icon Font to this folder. The theme I'm using allows for Custom <Head> Codes in its Theme Options. At the top of the block for these codes I added the following markup to enable the font in both the Admin area and front-facing for the reader: 
<link rel="stylesheet" href="../lunapiercook/fonts/erudus-icons-fork/dist/css/erudus_extended_style.css">

The layout of the labeling of the blocks the icons are displayed in is accomplished within the CSS, extracted 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 both the Warning and Caution icons and the Allergen icons ... Note the space between the Warning and Caution and the Contains and May Contain <span> tags:

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

Warning Caution

<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 Erudus font's original developers provided an English-language translation mechanism within their original CSS in the form of tags. The additional characters in the extended font are also located within that same e900 area. New tags were included in the modified CSS to match the previous work

ICON TAG ICON TAG ICON TAG
eicon-pepper
eicon-pepper-outline
eicon-pepper-25
eicon-pepper-50
eicon-pepper-75
eicon-pepper-100
Hot Plate
 eicon-hot-plate
Hot Plate
 eicon-circle-hot-plate
Pin Bones
 eicon-pin-bones
Pin Bones
 eicon-circle-pin-bones
Gluten Free
 eicon-gluten-free
Alpha-Gal
 eicon-alpha-gal
Alpha-Gal
 eicon-circle-alpha-gal
Antibiotic Free
 eicon-antibiotic-free
Buckwheat
 eicon-buckwheat
Buckwheat
 eicon-circle-buckwheat
Non-GMO
 eicon-non-gmo
Celery
 eicon-celery
Celery
 eicon-circle-celery
Halal
 eicon-halal
Cereal
 eicon-cereal
Cereal
 eicon-circle-cereal
Kosher
 eicon-kosher
Coconut
 eicon-coconut
Coconut
 eicon-circle-coconut
Organic
 eicon-organic
Corn
 eicon-corn
Corn
 eicon-circle-corn
Vegan
 eicon-vegan
Crustaceans
 eicon-crustaceans
Crustaceans
 eicon-circle-crustaceans
Vegetarian
 eicon-vegetarian
Eggs
 eicon-eggs
Eggs
 eicon-circle-eggs
Coeliac
 eicon-coeliac
Fish
 eicon-fish
Fish
 eicon-circle-fish
Gluten Free
 eicon-circle-gluten-free
Gluten
 eicon-gluten
Gluten
 eicon-circle-gluten
Antibiotic Free
 eicon-circle-antibiotic-free
Kiwi
 eicon-kiwi
Kiwi
 eicon-circle-kiwi
Non-GMO
 eicon-circle-non-gmo
Lupin
 eicon-lupin
Lupin
 eicon-circle-lupin
Halal
 eicon-circle-halal
Milk
 eicon-milk
Milk
 eicon-circle-milk
Kosher
 eicon-circle-kosher
Mold
 eicon-mold
Mold
 eicon-circle-mold
Organic
 eicon-circle-organic
Molluscs
 eicon-molluscs
Molluscs
 eicon-circle-molluscs
Vegan
 eicon-circle-vegan
MSG
 eicon-msg
MSG
 eicon-circle-msg
Vegetarian
 eicon-circle-vegetarian
Mustard
 eicon-mustard
Mustard
 eicon-circle-mustard
Nightshades
 eicon-nightshade
Nightshades
 eicon-circle-nightshade
Peanuts
 eicon-peanuts
Peanuts
 eicon-circle-peanuts
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
Yeast
 eicon-yeast
Yeast
 eicon-circle-yeast

For the HACCP icons, the legend is set as black. Each icon also has its own color level, which is set up in the CSS:

<div class="erudus-legend-background"><p><span class="erudus-legend erudus-haccp">HACCP</span></p>
		<!-- Icons are included here -->
		</div>

HACCP

Ready To Eat
 haccp-level-bread
eicon-haccp-bread
Dairy
 haccp-level-dairy
eicon-haccp-dairy
Fish
 haccp-level-fish
eicon-haccp-fish
Raw Meats
 haccp-level-meat
eicon-haccp-meat
Raw Poultry
 haccp-level-poultry
eicon-haccp-poultry
Vegetables & Fruits
 haccp-level-vegetables
eicon-haccp-vegetbales