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:
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.$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>';
<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>
<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>
<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>
<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"),
"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")
);
$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
The same goes for the warning and caution icons. The complete code for what you're seeing here is below.
Warning Caution
$available_erudus_warnings = array(
"hot-plate"=>array("vname"=>"Hot Plate","image"=>"eicon-circle-hot-plate","status"=>"allergen-level-no"),
"pin-bones"=>array("vname"=>"Pin Boness","image"=>"eicon-circle-pin-bones","status"=>"allergen-level-yes")
);
$str_warningdisplay .= '<div class="erudus-legend-background"><p><span class="erudus-legend erudus-contains">Warning</span> <span class="erudus-legend erudus-may-contain">Caution</span></p>';
foreach($available_erudus_warnings as $as=>$ap):
$warning_contains = $ap["status"];
if ($warning_contains !== "allergen-level-no") {
$str_warningdisplay .= '<div class="eicon-display ' . $warning_contains . ' "><div><span class="eicon ' . $ap["image"] . '"></span></div><div><span>' . $ap["vname"] . '</span></div></div>';
}
endforeach;
$str_warningdisplay .= '</div>';
$html .= $str_warningdisplay;The same also goes for the allergy icons themselves. The complete code for what you're seeing here is below.
Contains May Contain
CerealCoconutCornEggsGlutenKiwiMilkMoldSulfur DioxideYeast$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"),
"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")
);
$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;The code for the HACCP icons is different in that each icon also has an associated color designation to maintain industry standards. The complete code for what you're seeing here is below.
$available_erudus_haccps = array(HACCP
DairyFishRaw Poultry
"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")
);
$str_haccpdisplay .= '<div class="erudus-legend-background"><p><span class="erudus-legend erudus-haccp">HACCP</span></p>';
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 ' . $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;