Using The Font With PHP

Note: This page must be run on a PHP server.

It will likely be rare that the Erudus Extended Allergy Icon Font will be used directly on an HTML page. As the icons lend themselves more to ingredient databases, recipe apps, and menu display apps for restaurants, using the icons with PHP code would be more suitable. The reason this page has to be run on a PHP platform is that there are decisions to be made within the PHP code.

In Erudus' original documentation, they describe the color-keyed "Contains", "May Contains", and "Suitable For" banners, with the necessary icons being displayed underneath. To begin to get there, the HTML code for the empty page must be placed within the PHP code to link to the Erudus CSS:

$html = '<!doctype html>';
$html .= '<html>';
$html .= '<head>';
 $html .= '<meta charset="utf-8">';
 $html .= '<meta name="viewport" content="width=device-width, initial-scale=1">';
 $html .= '<link rel="stylesheet" href="../dist/css/erudus_extended_style.css">';
$html .= '</head>';
$html .= '<body>';

$html .= '</body>';

I start with arrays of which icons are to be displayed, and what their images and status are. This array can be saved for each ingredient, recipe, or restaurant menu item. I then use a Foreach loop to display the icons in their desired states.

$available_erudus_diets = array(
 "gluten-free"=>array("vname"=>"Gluten Free","image"=>"eicon eicon-circle-gluten-free","status"=>"suitable-level-yes"),
 "antibiotic-free"=>array("vname"=>"Antibiotic Free","image"=>"eicon eicon-circle-antibiotic-free","status"=>"suitable-level-no"),
 "non-gmo"=>array("vname"=>"Non-GMO","image"=>"eicon eicon-circle-non-gmo","status"=>"suitable-level-no"),
 "halal"=>array("vname"=>"Halal","image"=>"eicon eicon-circle-halal","status"=>"suitable-level-no"),
 "kosher"=>array("vname"=>"Kosher","image"=>"eicon eicon-circle-kosher","status"=>"suitable-level-no"),
 "organic"=>array("vname"=>"Organic","image"=>"eicon eicon-circle-organic","status"=>"suitable-level-yes"),
 "vegan"=>array("vname"=>"Vegans","image"=>"eicon eicon-circle-vegan","status"=>"suitable-level-no"),
 "vegetarian"=>array("vname"=>"Vegetarians","image"=>"eicon eicon-circle-vegetarian","status"=>"suitable-level-yes")
);

$str_dietdisplay .= '<div class="erudus-legend-background"><p><span class="erudus-legend erudus-suitable">Suitable For</span></p>';

foreach($available_erudus_diets as $as=>$ap):
 $diet_status = $ap["status"];
 if ($diet_status !== "suitable-level-no") {
  $str_dietdisplay .= '<div class="eicon-display ' . $diet_status . ' "><div><span class="eicon ' . $ap["image"] . '"></span></div><div><span>' . $ap["vname"] . '</span></div></div>';
 }
endforeach;

$str_dietdisplay .= '</div>';

$html .= $str_dietdisplay;

Suitable For

Gluten Free
Organic
Vegetarians

The same goes for the allergy icons themselves. The complete code for what you're seeing here is below.

Contains May Contain

Cereal
Corn
Eggs
Gluten
Milk
Sulfur Dioxide

$available_erudus_allergens = array(
 "alpha-gal"=>array("vname"=>"Alpha-Gal","image"=>"eicon-circle-alpha-gal","status"=>"allergen-level-no"),
 "buckwheat"=>array("vname"=>"Buckwheat","image"=>"eicon-circle-buckwheat","status"=>"allergen-level-no"),
 "celery"=>array("vname"=>"Celery","image"=>"eicon-circle-celery","status"=>"allergen-level-no"),
 "cereal"=>array("vname"=>"Cereal","image"=>"eicon-circle-cereal","status"=>"allergen-level-yes"),
 "corn"=>array("vname"=>"Corn","image"=>"eicon-circle-corn","status"=>"allergen-level-may"),
 "crustaceans"=>array("vname"=>"Crustaceans","image"=>"eicon-circle-crustaceans","status"=>"allergen-level-no"),
 "eggs"=>array("vname"=>"Eggs","image"=>"eicon-circle-eggs","status"=>"allergen-level-yes"),
 "fish"=>array("vname"=>"Fish","image"=>"eicon-circle-fish","status"=>"allergen-level-no"),
 "gluten"=>array("vname"=>"Gluten","image"=>"eicon-circle-gluten","status"=>"allergen-level-yes"),
 "lupin"=>array("vname"=>"Lupin","image"=>"eicon-circle-lupin","status"=>"allergen-level-no"),
 "milk"=>array("vname"=>"Milk","image"=>"eicon-circle-milk","status"=>"allergen-level-may"),
 "mollusks"=>array("vname"=>"Molluscs","image"=>"eicon-circle-molluscs","status"=>"allergen-level-no"),
 "msg"=>array("vname"=>"MSG","image"=>"eicon-circle-msg","status"=>"allergen-level-no"),
 "mustard"=>array("vname"=>"Mustard","image"=>"eicon-circle-mustard","status"=>"allergen-level-no"),
 "nightshade"=>array("vname"=>"Nightshades","image"=>"eicon-circle-nightshade","status"=>"allergen-level-no"),
 "peanuts"=>array("vname"=>"Peanuts","image"=>"eicon-circle-peanuts","status"=>"allergen-level-no"),
 "sesame"=>array("vname"=>"Sesame","image"=>"eicon-circle-sesame","status"=>"allergen-level-no"),
 "soy"=>array("vname"=>"Soya","image"=>"eicon-circle-soya","status"=>"allergen-level-no"),
 "sulfites"=>array("vname"=>"Sulfur Dioxide","image"=>"eicon-circle-so2","status"=>"allergen-level-yes"),
 "transfat"=>array("vname"=>"Trans Fats","image"=>"eicon-circle-transfat","status"=>"allergen-level-no"),
 "treenuts"=>array("vname"=>"Tree Nuts","image"=>"eicon-circle-nuts","status"=>"allergen-level-no")
);

$str_allergendisplay .= '<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>';

foreach($available_erudus_allergens as $as=>$ap):
 $allergen_contains = $ap["status"];
 if ($allergen_contains !== "allergen-level-no") {
  $str_allergendisplay .= '<div class="eicon-display ' . $allergen_contains . ' "><div><span class="eicon ' . $ap["image"] . '"></span></div><div><span>' . $ap["vname"] . '</span></div></div>';
 }
endforeach;

$str_allergendisplay .= '</div>';

$html .= $str_allergendisplay;