1 Clases CSS Recomendado para Foroactivo
Cargas una sola hoja de estilos y después escribes los iconos con una etiqueta corta. Toman el color del texto que los rodea, así que combinan con cualquier tema.
Paso 1 · Carga la hoja una vez
Pega esta línea al principio de la hoja CSS de tu foro (en Foroactivo, en el panel de administración, dentro de Visualización, en la hoja de estilo CSS):
@import url("https://cdn.jsdelivr.net/gh/KDavis13/lannita-icons@main/css/lannita-icons.css");Si tu plantilla admite etiquetas en el <head>, también puedes usar:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/KDavis13/lannita-icons@main/css/lannita-icons.css">Paso 2 · Escribe el icono
En la galería, pulsa Clase en el icono que quieras y pégalo donde se acepte HTML:
<span class="li li-crown"></span> Administración
<span class="li li-heraldic li-crown"></span> NoblezaAdministración · Nobleza
Paso 3 · Ajusta color y tamaño
El icono mide lo mismo que el texto (1em) y usa su color. Cámbialos con CSS:
.li { color: #b48a3c; font-size: 24px; }
.titulo .li { font-size: 2em; }2 Copiar el SVG
Pulsa Copiar en la galería y pega el código directamente en tu plantilla o mensaje. No necesita ninguna hoja externa y también toma el color del texto. Es útil para un icono suelto o si tu foro no deja importar CSS.
<svg … width="1em" height="1em" viewBox="0 0 64 64">…</svg>Algunos editores de mensajes eliminan las etiquetas <svg>; en ese caso, usa las clases CSS en plantillas.
3 Descargar el archivo
Pulsa SVG para guardar el archivo. Puedes editarlo (Inkscape, Illustrator, Figma) o subirlo como imagen. Como imagen (<img>) mantiene el color dorado por defecto y no cambia con tu tema; para colores personalizados, ábrelo y cambia currentColor por el color que quieras.
Mención obligatoria
Los iconos son gratis para cualquier foro o proyecto, pero es obligatorio mencionar a Lannita Codes con un enlace a su Tumblr. Pon la mención en un lugar visible, como el pie del foro o una página de créditos:
Iconos de <a href="https://lannitacodes.tumblr.com/">Lannita Codes</a>Iconos de Lannita Codes
Los iconos de Heráldica son adaptaciones de figuras de game-icons.net (CC BY 3.0), salvo las bestias basadas en dibujos de dominio público de SZSquirrel y algunas figuras de diseño propio (cada tarjeta indica su origen). Si usas alguno de game-icons.net, menciona también a su autor original, que aparece en su tarjeta de la galería; por ejemplo: León de Lorc (game-icons.net).
Si modificas los iconos, indica que los has cambiado. Licencia: Creative Commons Atribución 4.0 (CC BY 4.0).
Consejos
- Accesibilidad. Acompaña el icono de texto visible. Si va solo y significa algo, añade una etiqueta:
<span class="li li-key" role="img" aria-label="Llave"></span>. - Tamaño. Los iconos se leen bien desde 24 px; los ornamentales y los de dos figuras lucen más a 32 px o más.
- Versión fija. El enlace con
@mainsiempre trae la última versión. Si prefieres que tu foro no cambie nunca, pídenos una versión etiquetada. - Licencia. Iconos bajo CC BY 4.0: puedes usarlos y adaptarlos siempre que incluyas la mención a Lannita Codes.