@openscouts/scout-icon-webfont
Version:
Scouts Icons Webfont, utilizado en Mi Rincon Scout.
1,059 lines (967 loc) • 44.9 kB
HTML
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<title>Preview Icon Font</title>
<link rel="stylesheet" href="./scout-icon-webfont.css" />
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen p-8 font-sans text-gray-900">
<h1 class="text-3xl font-bold mb-8 text-center">Scouts Icons Webfont Preview</h1>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-6">
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-educador"
onclick="copyToClipboard(this)"
title="Click para copiar accion-educador"
>
<span class="scout accion-educador text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-educador
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-educador-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-educador-add"
>
<span class="scout accion-educador-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-educador-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-educador-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-educador-del"
>
<span class="scout accion-educador-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-educador-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-educador-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-educador-list"
>
<span class="scout accion-educador-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-educador-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-evento"
onclick="copyToClipboard(this)"
title="Click para copiar accion-evento"
>
<span class="scout accion-evento text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-evento
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-evento-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-evento-add"
>
<span class="scout accion-evento-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-evento-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-evento-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-evento-del"
>
<span class="scout accion-evento-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-evento-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-evento-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-evento-list"
>
<span class="scout accion-evento-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-evento-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-formador"
onclick="copyToClipboard(this)"
title="Click para copiar accion-formador"
>
<span class="scout accion-formador text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-formador
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-formador-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-formador-add"
>
<span class="scout accion-formador-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-formador-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-formador-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-formador-del"
>
<span class="scout accion-formador-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-formador-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-formador-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-formador-list"
>
<span class="scout accion-formador-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-formador-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-gestion"
onclick="copyToClipboard(this)"
title="Click para copiar accion-gestion"
>
<span class="scout accion-gestion text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-gestion
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-habilitacion"
onclick="copyToClipboard(this)"
title="Click para copiar accion-habilitacion"
>
<span class="scout accion-habilitacion text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-habilitacion
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-habilitacion-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-habilitacion-add"
>
<span class="scout accion-habilitacion-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-habilitacion-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-habilitacion-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-habilitacion-del"
>
<span class="scout accion-habilitacion-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-habilitacion-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-habilitacion-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-habilitacion-list"
>
<span class="scout accion-habilitacion-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-habilitacion-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-im"
onclick="copyToClipboard(this)"
title="Click para copiar accion-im"
>
<span class="scout accion-im text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-im
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-im-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-im-add"
>
<span class="scout accion-im-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-im-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-im-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-im-del"
>
<span class="scout accion-im-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-im-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-im-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-im-list"
>
<span class="scout accion-im-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-im-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-im-update"
onclick="copyToClipboard(this)"
title="Click para copiar accion-im-update"
>
<span class="scout accion-im-update text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-im-update
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-lugar"
onclick="copyToClipboard(this)"
title="Click para copiar accion-lugar"
>
<span class="scout accion-lugar text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-lugar
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-lugar-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-lugar-add"
>
<span class="scout accion-lugar-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-lugar-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-lugar-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-lugar-del"
>
<span class="scout accion-lugar-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-lugar-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-lugar-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-lugar-list"
>
<span class="scout accion-lugar-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-lugar-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-scout-avatar"
onclick="copyToClipboard(this)"
title="Click para copiar accion-scout-avatar"
>
<span class="scout accion-scout-avatar text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-scout-avatar
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-scout-buscar"
onclick="copyToClipboard(this)"
title="Click para copiar accion-scout-buscar"
>
<span class="scout accion-scout-buscar text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-scout-buscar
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-scout-perfil"
onclick="copyToClipboard(this)"
title="Click para copiar accion-scout-perfil"
>
<span class="scout accion-scout-perfil text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-scout-perfil
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-trabajo"
onclick="copyToClipboard(this)"
title="Click para copiar accion-trabajo"
>
<span class="scout accion-trabajo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-trabajo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-trabajo-add"
onclick="copyToClipboard(this)"
title="Click para copiar accion-trabajo-add"
>
<span class="scout accion-trabajo-add text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-trabajo-add
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-trabajo-del"
onclick="copyToClipboard(this)"
title="Click para copiar accion-trabajo-del"
>
<span class="scout accion-trabajo-del text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-trabajo-del
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="accion-trabajo-list"
onclick="copyToClipboard(this)"
title="Click para copiar accion-trabajo-list"
>
<span class="scout accion-trabajo-list text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
accion-trabajo-list
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-ams"
onclick="copyToClipboard(this)"
title="Click para copiar area-ams"
>
<span class="scout area-ams text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-ams
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-ayf"
onclick="copyToClipboard(this)"
title="Click para copiar area-ayf"
>
<span class="scout area-ayf text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-ayf
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-budista"
onclick="copyToClipboard(this)"
title="Click para copiar area-budista"
>
<span class="scout area-budista text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-budista
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-catolico"
onclick="copyToClipboard(this)"
title="Click para copiar area-catolico"
>
<span class="scout area-catolico text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-catolico
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-comunicaciones"
onclick="copyToClipboard(this)"
title="Click para copiar area-comunicaciones"
>
<span class="scout area-comunicaciones text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-comunicaciones
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-desarrollo"
onclick="copyToClipboard(this)"
title="Click para copiar area-desarrollo"
>
<span class="scout area-desarrollo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-desarrollo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-eys"
onclick="copyToClipboard(this)"
title="Click para copiar area-eys"
>
<span class="scout area-eys text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-eys
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-infraestructura"
onclick="copyToClipboard(this)"
title="Click para copiar area-infraestructura"
>
<span class="scout area-infraestructura text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-infraestructura
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-juventud"
onclick="copyToClipboard(this)"
title="Click para copiar area-juventud"
>
<span class="scout area-juventud text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-juventud
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-musulmanes"
onclick="copyToClipboard(this)"
title="Click para copiar area-musulmanes"
>
<span class="scout area-musulmanes text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-musulmanes
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="area-programa"
onclick="copyToClipboard(this)"
title="Click para copiar area-programa"
>
<span class="scout area-programa text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
area-programa
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-banderin"
onclick="copyToClipboard(this)"
title="Click para copiar camping-banderin"
>
<span class="scout camping-banderin text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-banderin
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-botiquin"
onclick="copyToClipboard(this)"
title="Click para copiar camping-botiquin"
>
<span class="scout camping-botiquin text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-botiquin
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-brujula"
onclick="copyToClipboard(this)"
title="Click para copiar camping-brujula"
>
<span class="scout camping-brujula text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-brujula
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-cantimplora"
onclick="copyToClipboard(this)"
title="Click para copiar camping-cantimplora"
>
<span class="scout camping-cantimplora text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-cantimplora
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-carpa"
onclick="copyToClipboard(this)"
title="Click para copiar camping-carpa"
>
<span class="scout camping-carpa text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-carpa
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-chuchillo"
onclick="copyToClipboard(this)"
title="Click para copiar camping-chuchillo"
>
<span class="scout camping-chuchillo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-chuchillo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-fuego"
onclick="copyToClipboard(this)"
title="Click para copiar camping-fuego"
>
<span class="scout camping-fuego text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-fuego
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-mochila"
onclick="copyToClipboard(this)"
title="Click para copiar camping-mochila"
>
<span class="scout camping-mochila text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-mochila
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-montania"
onclick="copyToClipboard(this)"
title="Click para copiar camping-montania"
>
<span class="scout camping-montania text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-montania
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-pinos"
onclick="copyToClipboard(this)"
title="Click para copiar camping-pinos"
>
<span class="scout camping-pinos text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-pinos
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-prismatico"
onclick="copyToClipboard(this)"
title="Click para copiar camping-prismatico"
>
<span class="scout camping-prismatico text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-prismatico
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-silbato"
onclick="copyToClipboard(this)"
title="Click para copiar camping-silbato"
>
<span class="scout camping-silbato text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-silbato
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-trompeta"
onclick="copyToClipboard(this)"
title="Click para copiar camping-trompeta"
>
<span class="scout camping-trompeta text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-trompeta
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="lobo"
onclick="copyToClipboard(this)"
title="Click para copiar lobo"
>
<span class="scout lobo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
lobo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="ltv-bagheera"
onclick="copyToClipboard(this)"
title="Click para copiar ltv-bagheera"
>
<span class="scout ltv-bagheera text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
ltv-bagheera
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="ltv-baloo"
onclick="copyToClipboard(this)"
title="Click para copiar ltv-baloo"
>
<span class="scout ltv-baloo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
ltv-baloo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="ltv-kaa"
onclick="copyToClipboard(this)"
title="Click para copiar ltv-kaa"
>
<span class="scout ltv-kaa text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
ltv-kaa
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="ltv-mowgli"
onclick="copyToClipboard(this)"
title="Click para copiar ltv-mowgli"
>
<span class="scout ltv-mowgli text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
ltv-mowgli
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="ltv-raksha"
onclick="copyToClipboard(this)"
title="Click para copiar ltv-raksha"
>
<span class="scout ltv-raksha text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
ltv-raksha
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="funcion-dd"
onclick="copyToClipboard(this)"
title="Click para copiar funcion-dd"
>
<span class="scout funcion-dd text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
funcion-dd
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="funcion-dirigente"
onclick="copyToClipboard(this)"
title="Click para copiar funcion-dirigente"
>
<span class="scout funcion-dirigente text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
funcion-dirigente
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="funcion-dz"
onclick="copyToClipboard(this)"
title="Click para copiar funcion-dz"
>
<span class="scout funcion-dz text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
funcion-dz
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="funcion-jg"
onclick="copyToClipboard(this)"
title="Click para copiar funcion-jg"
>
<span class="scout funcion-jg text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
funcion-jg
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-insignia-caminantes"
onclick="copyToClipboard(this)"
title="Click para copiar saac-insignia-caminantes"
>
<span class="scout saac-insignia-caminantes text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-insignia-caminantes
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-insignia-lyl"
onclick="copyToClipboard(this)"
title="Click para copiar saac-insignia-lyl"
>
<span class="scout saac-insignia-lyl text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-insignia-lyl
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-insignia-rover"
onclick="copyToClipboard(this)"
title="Click para copiar saac-insignia-rover"
>
<span class="scout saac-insignia-rover text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-insignia-rover
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-insignia-scout"
onclick="copyToClipboard(this)"
title="Click para copiar saac-insignia-scout"
>
<span class="scout saac-insignia-scout text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-insignia-scout
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-isologo"
onclick="copyToClipboard(this)"
title="Click para copiar saac-isologo"
>
<span class="scout saac-isologo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-isologo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-lis"
onclick="copyToClipboard(this)"
title="Click para copiar saac-lis"
>
<span class="scout saac-lis text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-lis
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-lis-nacional"
onclick="copyToClipboard(this)"
title="Click para copiar saac-lis-nacional"
>
<span class="scout saac-lis-nacional text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-lis-nacional
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-oms"
onclick="copyToClipboard(this)"
title="Click para copiar saac-oms"
>
<span class="scout saac-oms text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-oms
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="saac-zona9"
onclick="copyToClipboard(this)"
title="Click para copiar saac-zona9"
>
<span class="scout saac-zona9 text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
saac-zona9
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="camping-llano"
onclick="copyToClipboard(this)"
title="Click para copiar camping-llano"
>
<span class="scout camping-llano text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
camping-llano
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="canoa"
onclick="copyToClipboard(this)"
title="Click para copiar canoa"
>
<span class="scout canoa text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
canoa
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="cayado"
onclick="copyToClipboard(this)"
title="Click para copiar cayado"
>
<span class="scout cayado text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
cayado
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="objetos-panuelo"
onclick="copyToClipboard(this)"
title="Click para copiar objetos-panuelo"
>
<span class="scout objetos-panuelo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
objetos-panuelo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="scout-bp"
onclick="copyToClipboard(this)"
title="Click para copiar scout-bp"
>
<span class="scout scout-bp text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
scout-bp
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="scout-caminando"
onclick="copyToClipboard(this)"
title="Click para copiar scout-caminando"
>
<span class="scout scout-caminando text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
scout-caminando
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="scout-saludo"
onclick="copyToClipboard(this)"
title="Click para copiar scout-saludo"
>
<span class="scout scout-saludo text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
scout-saludo
</div>
</div>
<div
class="flex flex-col items-center bg-white rounded-lg shadow p-4 hover:shadow-lg transition-shadow duration-300 cursor-pointer select-none"
data-icon-name="scout-saludo-mano"
onclick="copyToClipboard(this)"
title="Click para copiar scout-saludo-mano"
>
<span class="scout scout-saludo-mano text-5xl text-indigo-600"></span>
<div class="mt-3 text-sm font-mono text-gray-700 text-center break-words">
scout-saludo-mano
</div>
</div>
</div>
<!-- Toast notificación -->
<div
id="toast"
class="fixed bottom-6 left-1/2 transform -translate-x-1/2 bg-indigo-600 text-white px-4 py-2 rounded shadow opacity-0 pointer-events-none transition-opacity duration-300"
>
Copiado
</div>
<footer class="mt-12 text-center text-gray-500 text-xs">
Fuentes de Iconos Creada y Mantenida por Andres Lacquaniti
</footer>
<script>
function copyToClipboard(el) {
const iconName = el.getAttribute('data-icon-name');
navigator.clipboard.writeText(iconName).then(() => {
showToast(`Copiado: ${iconName}`);
}).catch(() => {
alert('Error copiando al portapapeles');
});
}
function showToast(message) {
const toast = document.getElementById('toast');
toast.textContent = message;
toast.classList.remove('opacity-0', 'pointer-events-none');
setTimeout(() => {
toast.classList.add('opacity-0', 'pointer-events-none');
}, 1500);
}
</script>
</body>
</html>