Emulating Erudus" In-App Icon Usage

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

Erudus doesn't utilize their Food Allergy Icon Font within their own apps. Instead, their internal system uses their earlier Food Allergy Icons. The download on that particular page is a ZIP file containing 900 individual files in various formats, including the Illustrator source files, and resulting EPS, JPG, and PNG files in grey, red, and amber of various sizes. Erudus logos and a PDF outlining Erudus Brand Guidelines for the icon files are also included. Erudus' internal systems use the PNG files in three colors from that download ... But not quite. The provided PNG files are square, on 50px, 100px, and 200px sizes. The PNG files used in the Erudus apps are the 200px size files, resized to 150px on the server, but then resized again in the apps to 85px.

What that means is simply this: To emulate how Erudus uses the icons in their apps, I've added the 85px sizing to the CSS file in both <div class="eicon-large"> and <div class="eicon-display-large "> classes for use with the font, with a width for each icon of 145px to match Erudus' spacing, and a 14px size for the caption with a line height of 2.5:

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 I describe in the rest of this documentation.

But in their apps Erudus' developers add those designations to the icon's captions. I've implemented this below in PHP. I start with arrays of what icons are to be displayed, what their images and status are, and then a pair of Foreach loops to display the icons in their desired states.

Allergen Ingredients

Diet Suitability

Warnings & Cautions

HACCP

PHP Code

$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"),
 "coconut"=>array("vname"=>"Coconut","image"=>"eicon-circle-coconut","status"=>"allergen-level-may"),
 "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"),
 "kiwi"=>array("vname"=>"Kiwi","image"=>"eicon-circle-kiwi","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"),
 "mold"=>array("vname"=>"Mold","image"=>"eicon-circle-mold","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"),
 "yeast"=>array("vname"=>"Yeast","image"=>"eicon-circle-yeast","status"=>"allergen-level-yes")
);

$html .= '<h5>Allergen Ingredients</h5>';
$str_allergendisplay = '<div class="eicon-large">';

foreach($available_erudus_allergens as $as=>$ap):
 $allergen_status = $ap["status"];
 $str_allergen_name = $ap["vname"];
 $str_allergen_image = $ap["image"];
 if ($allergen_status !== "allergen-level-no") {
  $str_allergendisplay .= '<div class="eicon-display-large ' .$allergen_status. ' "><div><span class="eicon ' .$str_allergen_image. '"></span></div>';
  if ($allergen_status == "allergen-level-may") {
   $str_allergendisplay .= '<div><span>May Contain ' .$str_allergen_name. '</span></div></div>';
  } else {
   $str_allergendisplay .= '<div><span>Contains ' .$str_allergen_name. '</span></div></div>';
  }
 }
endforeach;
$str_allergendisplay .= '</div>';

$html .= $str_allergendisplay;

$available_erudus_diets = array(
 "gluten-free"=>array("vname"=>"Gluten Free","image"=>"eicon eicon-circle-gluten-free","status"=>"suitable-level-yes"),
 "coeliac"=>array("vname"=>"Coeliac","image"=>"eicon eicon-coeliac","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")
);

$html .= '<h5>Diet Suitability</h5>';
$str_dietdisplay = '<div class="eicon-large">';

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

$str_dietdisplay .= '</div>';

$html .= $str_dietdisplay;

$available_erudus_warnings = array(
 "hot-plate"=>array("vname"=>"Hot Plate","image"=>"eicon-circle-hot-plate","status"=>"allergen-level-may"),
 "pin-bones"=>array("vname"=>"Pin Boness","image"=>"eicon-circle-pin-bones","status"=>"allergen-level-yes")
);

$html .= '<h5>Warnings & Cautions</h5>';
$str_warningdisplay = '<div class="eicon-large">';

foreach($available_erudus_warnings as $as=>$ap):
 $warning_contains = $ap["status"];
 $str_warning_name = $ap["status"];
 $str_warning_image = $ap["status"];
 if ($warning_contains !== "allergen-level-no") {
  $str_warningdisplay .= '<div class="eicon-display ' . $warning_contains . ' "><div><span class="eicon ' . $str_warning_image . '"></span></div>';
  if ($allergen_status == "allergen-level-may") {
   $str_warningdisplay .= '<div><span>Caution: ' .$str_warning_name. '</span></div></div>';
  } else {
   $str_warningdisplay .= '<div><span>Warning: ' .$str_warning_name. '</span></div></div>';
  }
 }
endforeach;

$str_warningdisplay .= '</div>';

$html .= $str_warningdisplay;



$html .= $str_warningdisplay;

$available_erudus_haccps = array(
 "bread"=>array("vname"=>"Ready To Eat","image"=>"eicon-haccp-bread","color"=>"haccp-level-bread","status"=>"no"),
 "dairy"=>array("vname"=>"Dairy","image"=>"eicon-haccp-dairy","color"=>"haccp-level-dairy","status"=>"yes"),
 "fish"=>array("vname"=>"Fish","image"=>"eicon-haccp-fish","color"=>"haccp-level-fish","status"=>"yes"),
 "meat"=>array("vname"=>"Raw Meat","image"=>"eicon-haccp-meat","color"=>"haccp-level-meat","status"=>"no"),
 "poultry"=>array("vname"=>"Raw Poultry","image"=>"eicon-haccp-poultry","color"=>"haccp-level-poultry","status"=>"yes"),
 "vegetables"=>array("vname"=>"Vegetables & Fruit","image"=>"eicon-haccp-vegetables","color"=>"haccp-level-vegetables","status"=>"no")
);

$html .= '<h5>HACCP</h5>';
$str_haccpdisplay = '<div class="eicon-large">';

foreach($available_erudus_haccps as $as=>$ap):
 $haccp_contains = $ap["status"];
 $str_haccp_name = $ap["vname"];
 $str_haccp_image = $ap["image"];
 $str_haccp_color = $ap["color"];
 if ($haccp_contains !== "no") {
  $str_haccpdisplay .= '<div class="eicon-display-large ' . $str_haccp_color . ' "><div><span class="eicon ' . $str_haccp_image . '"></span></div><div><span>' .$str_haccp_name. '</span></div></div>';
 }
endforeach;

$str_haccpdisplay .= '</div>';

$html .= $str_haccpdisplay;