Icones no Menu – Script Shopify

2 meses ago fernando

Site para escolher os Icones: https://fontawesome.com/search?o=r&m=free

Script 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>.header__menu-item i, .list-menu__item i, .link i {margin-right: 4px;}</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuIcons = {
  'Inicio': 'fas fa-home',
  'Categorias': 'fas fa-tags',
  'Contato': 'fas fa-envelope',
  // 'TITULO': 'NOME DO ICONE',
};
const menuItems = document.querySelectorAll('.header__menu-item, .list-menu__item, .link');
menuItems.forEach(function(menuItem) { const menuText = menuItem.innerText.trim();
  if (menuIcons[menuText]) { const iconClass = menuIcons[menuText]; const iconElement = document.createElement('i'); iconElement.className = iconClass; menuItem.insertBefore(iconElement, menuItem.firstChild);
  }});
});
</script>
Esse tutorial foi util?

Related articles