Allergen Symbols for food menu

  • Looking to add some sort of symbol or icon for food items that may be at risk for certain allergies. My client didn’t want woocommerce integration so i’m having trouble figuring out a way to label the ones that are at risk. Ideally I would put a symbol directly next to the title for each food item but since i’m simply using a price list, i’m not sure how.

    ex.) mint* – imagine instead of the asterisk, there was a leaf symbol to signify that it is vegan

    Any ideas?

    • This topic was modified 3 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi! Where are you attempting to add the icon? Would you share a screenshot and indicate the desired location of the icon?

    Have you searched the web for icons you can use either for free or paid that you can then upload to WordPress and use? I’m unsure if you are referring to adding icons in a form list, menu, or otherwise, so any other info you can provide would be helpful in crafting a good solution for you.

    Good luck out there! Save me some macaroons!

    It looks like you’re using this Price List widget from Elementor.
    https://elementor.com/widgets/price-list-widget/

    Elementor includes the Font Awesome icon set. If you’re able to place HTML inside the title field on each list item, you could drop in any of these icons.
    https://fontawesome.com/v5.15/icons

    Copy the HTML from the icon page and paste it into the list item’s title field. Add color of your choice in the style attribute and you’ll end up with this:

    Mint Chip <i class="fas fa-leaf" style="color: green;"></i>

    If you’re unable to place HTML in that field, you’ll have to use a different widget. Or use custom HTML.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Allergen Symbols for food menu’ is closed to new replies.

Tags