Create item flags. Then use the following CSS. The image name does not have to be the same, but it makes it easier to read.
.fdm-flag[title="**flagname**"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/**flagname**.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Code language: CSS (css)
All 14 allergens
/* -- [Start allergenen icons food & drink menu] -- */
.fdm-flag[title="ei"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/ei.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="gluten"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/gluten.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="lupine"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/lupine.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="melk"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/melk.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="mosterd"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/mosterd.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="noten"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/noten.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="pindas"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/pindas.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="schaaldieren"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/schaaldieren.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="selderij"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/selderij.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="sesamzaad"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/sesamzaad.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="soja"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/soja.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="vis"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/vis.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="weekdieren"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/weekdieren.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.fdm-flag[title="zwaveldioxide"] {
background-image:
url('http://deloods.xenonis.nl/wordpress/wp-content/uploads/allergenen/zwaveldioxide.png');
background-repeat: no-repeat;
border: none;
width: 45px;
height: 45px;
padding: 0;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
/* -- [End allergenen icons food & drink menu] -- */
Code language: CSS (css)