Замена различных ссылок с c текстом на значки Font Awesome вызывает дублирование одних и тех же значков.

Question

Я пытаюсь заменить указанный c текст в ссылке на Font Awesome Icons. Я могу это сделать, но все значки такие же (как и в первом). Почему отображаются дубликаты и как это исправить?

HTML:

<ul>
  <li><a href="http://">FacebookIcon</a></li>
  <li><a href="http://">FacebookIconCircle</a></li>
  <li><a href="http://">FacebookIconSquare</a></li>
</ul>

jQuery:

$('#main-header .widget.Header .header-widget .header-identity .header-title-tagline ul li a:contains("FacebookIcon")').html('<i class="fab fa-facebook-f"></i>');
$('#main-header .widget.Header .header-widget .header-identity .header-title-tagline ul li a:contains("FacebookIconCircle")').html('<i class="fab fa-facebook"></i>');
$('#main-header .widget.Header .header-widget .header-identity .header-title-tagline ul li a:contains("FacebookIconSquare")').html('<i class="fab fa-facebook-square"></i>');

Результат:

<ul>
  <li><a href="http://"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="http://"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="http://"><i class="fab fa-facebook-f"></i></a></li>
</ul>

Желаемый результат

<ul>
  <li><a href="http://"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="http://"><i class="fab fa-facebook"></i></a></li>
  <li><a href="http://"><i class="fab fa-facebook-square"></i></a></li>
</ul>

Answer 1

Хотя вы могли бы рассмотреть возможность использования .filter () для дальнейшего указания вашего селектора, возможно, лучше рассмотреть возможность использования .html(). Используя .html(), вы можете перебирать все выбранные вами элементы <a>. Вы также можете создать объект, который сопоставляет имена значков с отличными шрифтами тегами. Для каждого тега привязки вы можете получить его текст и использовать его при поиске объекта следующим образом:

const icons = {
  'FacebookIcon': '<i class="fab fa-facebook-f"></i>',
  'FacebookIconCircle': '<i class="fab fa-facebook"></i>',
  'FacebookIconSquare': '<i class="fab fa-facebook-square"></i>'
};

$('a').html(function() {
  return icons[$(this).text()];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<ul>
  <li><a href="http://">FacebookIcon</a></li>
  <li><a href="http://">FacebookIconCircle</a></li>
  <li><a href="http://">FacebookIconSquare</a></li>
</ul>