prueba – Marketplace

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botón con Lordicon</title>
    <!-- Agrega el enlace al archivo JavaScript de Lordicon -->
    <script src="https://cdn.lordicon.com/lordicon.js"></script>
    <style>
        /* Estilo del botón dentro del atributo */
        .woocommerce ul.products li.product .button {
            display: inline-block;
            cursor: pointer;
            border: none;
            background: none;
            padding: 0;
            margin: 0;
            width: 100px; /* Ancho del botón */
            height: auto; /* Altura automática según el contenido */
            text-align: center;
            font-size: 14px; /* Tamaño de fuente */
        }

        /* Estilo del ícono */
        .lord-icon {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- Botón con Lordicon -->
    <button class="woocommerce ul.products li.product .button" onclick="toggleIcon()">
        <!-- Coloca el Lordicon dentro del botón -->
        <lord-icon
            src="https://cdn.lordicon.com/eiekfffz.json"
            trigger="hover"
            colors="primary:#121331,secondary:#c71f16,tertiary:#000000"
            style="width:100%;height:100%">
        </lord-icon>
    </button>

    <script>
        // Función para cambiar el estado del icono (ejemplo)
        function toggleIcon() {
            var icon = document.querySelector('.lord-icon');
            if (icon.getAttribute('trigger') === 'hover') {
                icon.setAttribute('trigger', 'loop');
            } else {
                icon.setAttribute('trigger', 'hover');
            }
        }
    </script>
</body>
</html>