Подстановка иконок в список с помощью сравнения содержимого?

Question

[Mesuti]

Привет!
В CMS указываю пункты меню текстом.
И они генерируются в список.
Как можно с помощью js сравнить значение пункта меню и в зависимости от значения поставить иконку перед словом?
Песочница с заготовками jsFiddle
Пример разметки:

<ul id="list">
  <li><span id="icon"></span> Mail</li>
  <li><span id="icon"></span> Pen</li>
  <li><span id="icon"></span> Car</li>
</ul>

// ИКОНКИ 
<i class="far fa-envelope"></i>
<i class="fas fa-pencil-alt"></i>
<i class="fas fa-car"></i>

id у span нельзя сделать разный, так как пункты меню генерируются в CMS.

Comments

[alexalexes]

Костылите с помощью JS на клиенте, когда нужно разобраться с шаблонами на самой CMS?
PS: Если на странице появляется не оригинальный DOM-элемент с таким же id, то это повод перезадать назначение имени этого атрибута как class. Иначе, смысла нету в обращении к нему по id через JS.

Answer 1

[Антон Швец]

https://jsfiddle.net/ma8t4v7r/

Comments

[Mesuti]

Спасибо!