¿Cómo usar Uicons?

Puedes utilizar Uicons en el proyecto de tu página web de tres maneras distintas: insertándolos a través de nuestro CDN, descargando los iconos o el pack completo que incluye todos los iconos en los formatos disponibles (SVG, CSS y archivo de fuente) y un ejemplo de HTML, o instalándolos a través del gestor de paquetes npm.

Mediante nuestro CDN

La manera más rápida de incluir Uicons en tu página web es introduciéndolos en forma de código. Para ello, copia y pega el link en la sección <head> de tu documento HTML o bien inserta el código en tu CSS a través de la regla @import.

Selecciona el icono que quieras utilizar y en la sección CDN de la página del icono encontrarás dos formas de código que podrás copiar, haciendo clic en los distintos botones de copiado, y añadir directamente a tu proyecto.

Mediante descarga

Esta opción te permite obtener el pack de iconos completo, que incluye cada icono individual en formato SVG, las hojas de estilo CSS, los archivos de fuentes y un ejemplo de HTML.

Cuando hayas elegido el icono que necesites, haz clic en el botón de descarga que aparece en la sección "Descargar" para obtener el pack de iconos completo.

Mediante el gestor de paquetes npm

Instala la última versión de Uicons para mantener actualizados tus proyectos con los últimos iconos y mejoras gracias al gestor de paquetes npm. Esta versión incluye todos los iconos en formato SVG, CSS y como archivos de fuente.

npm i @flaticon/flaticon-uicons

En resumen, este método te ofrece el mismo resultado que si descargaras los iconos directamente desde nuestra web, pero te permite tener el paquete de iconos siempre actualizado. Si necesitas más información dirígete a la
página web del repositorio

¿Qué incluye la descarga?

Cada pack de estilo de Uicons contiene los siguientes directorios y archivos:

Archivos & carpetas Lo que son
/css Hojas de estilo para fuentes web
/svg SVG individual para cada icono
/webfont Archivos de fuentes web con CSS
Usar fuentes web con CSS

El archivo /css/uicons-[your-style].css contiene el estilo principal más todos los estilos de iconos que necesitarás cuando uses Uicons. La carpeta /webfonts contiene todos los archivos que el CSS de arriba depende y hace referencia.

Copia la carpeta /webfonts completa y /css/uicons- [your-style] .css en el directorio de activos estáticos de tu proyecto (o donde prefieras tener los activos de front-end o las cosas del proveedor).

Agrega una referencia al archivo /css/uicons-[your-style].css copiado en el <head> de cada plantilla o página en la que quieras usar Uicons.

Reemplaza uicons-[your-style].css con el nombre del estilo que se ha descargado.

Por ejemplo: uicons-ounded-outline.css

<head>
  <link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
  <i class="fi fi-ro-user"></i>
  <i class="fi fi-ro-arrow-right"></i>
  <i class="fi fi-ro-book"></i>
  <i class="fi fi-ro-clean"></i>
</body>

Dado que estás administrando todos los archivos descargados, asegúrate de que las referencias en tus páginas <head> sean precisas con respecto al lugar donde has movido todos los archivos de Uicons en tu proyecto.

Usar diferentes estilos

¿Quieres usar más de un estilo? Para hacerlo, debes descargar todos los estilos que desees utilizar en tu proyecto.

Uicons te permite usar dos estilos de terminaciones diferentes (redondeadas y rectas) y tres pesos diferentes (normal, negrita y sólido) para cada uno de ellos.

A continuación, tendrás que colocar todos los archivos en las carpetas como explicamos en la sección anterior y luego agregar una referencia en la sección para cada estilo que has descargado.

<head>
  <link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet">
  <link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet">
</head>

Cada estilo hace uso de un prefijo diferente como podemos ver en la siguiente tabla:

Peso Terminación Prefijo Ejemplo Resultado
Normal Redondeado fi-rr <i class="fi fi-rr-user"></i>
Negrita Redondeado fi-br <i class="fi fi-br-user"></i>
Sólido Redondeado fi-sr <i class="fi fi-sr-user"></i>
Normal Recto fi-rs <i class="fi fi-rs-user"></i>
Negrita Recto fi-bs <i class="fi fi-bs-user"></i>
Sólido Recto fi-ss <i class="fi fi-ss-user"></i>
Type Prefijo Ejemplo Resultado
Marcas fi-rr <i class="fi fi-brands-instagram"></i>

Recomendamos mantener las carpetas /webfonts y /css en el mismo directorio. Si no es así, deberás cambiar la ruta a las fuentes web mencionadas en el archivo CSS de cada estilo.

Usar los iconos

Con las referencias completas, ya puedes comenzar a hacer referencia a los iconos en tus plantillas o páginas.

<body>
  <i class="fi fi-rr-user"></i>
  <i class="fi fi-br-arrow-right"></i>
  <i class="fi fi-sr-book"></i>
  <i class="fi fi-rr-clean"></i>
</body>
Cómo atribuir

Crear iconos de calidad conlleva tiempo y esfuerzo. Por eso, solamente pedimos que se añada una pequeña línea de atribución. Selecciona la plataforma donde usarás el recurso.

Copia este enlace y pégalo donde esté

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

Si tienes cualquier otra pregunta, visita la sección de las FAQ

bold regular solid rounded straight

¿Recomendaría Flaticon a un amigo?

0 1 2 3 4 5 6 7 8 9 10
Probablemente no Seguramente sí