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>';

There are two different types of usage for the spiciness characters: A rating style usage, using multiple characters, and a set of percentage-style characters.Which style you use is enirely up to you. I use a nested for loop for the rating style, whereby different maximum spiciness ratings can be displayed.

Full Size - 50px: 2-of-5 Rating

<div>
 <div class="allergen-level-yes ">
 $i = 1;
 $rating = 2;
 $max = 5;
 for (; ; ) {
  if ($i > $max) {
  break;
  }
  if ($i > $rating) {
   $html .= '<span class="eicon eicon-pepper-outline "></span>';
   $i++;
  }
  else {
   $html .= '<span class="eicon eicon-pepper "></span>';
   $i++;
  }
 }
 $html .= '</div>';
</div>

Small Size - 32px: 1-of-3 Rating

<div class="eicon-small">
 <div class="allergen-level-yes ">
 $i = 1;
 $rating = 1;
 $max = 3;
 for (; ; ) {
  if ($i > $max) {
  break;
  }
  if ($i > $rating) {
   $html .= '<span class="eicon eicon-pepper-outline "></span>';
   $i++;
  }
  else {
   $html .= '<span class="eicon eicon-pepper "></span>';
   $i++;
  }
 }
 $html .= '</div>';
</div>


The percentage style spiciness characters are displayed directly as-needed, using simple numerical values.

Full Size - 50px

<div>
 <div class="allergen-level-yes ">
 <span class="eicon eicon-pepper-25 "></span>
 <span class="eicon eicon-pepper-50 "></span>
 <span class="eicon eicon-pepper-75 "></span>
 <span class="eicon eicon-pepper-100 "></span>
 </div>
</div>

Small Size - 32px

<div class="eicon-small">
 <div class="allergen-level-yes ">
 <span class="eicon eicon-pepper-25 "></span>
 <span class="eicon eicon-pepper-50 "></span>
 <span class="eicon eicon-pepper-75 "></span>
 <span class="eicon eicon-pepper-100 "></span>
 </div>
</div>

I use arrays to sort out 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
Coconut
Corn
Eggs
Gluten
Milk
Mold
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"=>"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"),
 "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")
);

$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;