Solo para usuarios Premium
Crea colecciones ilimitadas y añade todos los iconos Premium que necesites.
Selecciona el estilo y la terminación
La descarga incluye iconos en formato SVG, archivo de fuentes y el CSS necesario para usar la fuente de iconos y un ejemplo de HTML.
Regístrate y descargaIncluye el archivo CSS en la sección <head> de tu página web o a través de @import en tu CSS.
Regístrate y descargaCada 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 |
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.
¿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 |
---|---|---|---|---|
Regular | Rounded | fi-rr | <i class="fi fi-rr-user"></i> |
|
Bold | Rounded | fi-br | <i class="fi fi-br-user"></i> |
|
Solid | Rounded | fi-sr | <i class="fi fi-sr-user"></i> |
|
Regular | Straight | fi-rs | <i class="fi fi-rs-user"></i> |
|
Bold | Straight | fi-bs | <i class="fi fi-bs-user"></i> |
|
Solid | Straight | fi-ss | <i class="fi fi-ss-user"></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.
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>
Nuestra licencia permite usar los contenidos:
Este texto es un resumen y no tiene validez contractual. Para más información, consulta nuestros Términos de Uso antes de usar el contenido.
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é
Si tienes cualquier otra pregunta, visita la sección de las FAQ
Solo para usuarios Premium
Crea colecciones ilimitadas y añade todos los iconos Premium que necesites.
Colección:
Pack:
Más de 4,383,000 iconos por 7,50€/mes
¿Lo necesitas para la web? Copia este enlace en tu página web:
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.
Redes sociales
Uso Web
Elementos impresos
Video
Apps/Juegos
Redes sociales (Pinterest, Facebook, Twitter, etc)
Selecciona tu red social favorita y comparte nuestros iconos con tus contactos o amigos. Si no utilizas estas redes sociales, incluye este link en las que utilices.
Si tienes cualquier otra pregunta, consulta la sección de FAQs
Ejemplo: Páginas web, redes sociales, blogs, ebooks, newsletters, etc.
Incluye el siguiente enlace en un sitio visible, cerca del lugar donde estés usando el recurso. Si no es posible, también puedes incluirlo en el pie de tu página web, blog, newsletter o en la sección de créditos.
Si tienes cualquier otra pregunta, consulta la sección de FAQs
Ejemplos: Libros, ropa, flyers, posters, invitaciones, publicidad, etc.
Incluye la línea de atribución cerca del lugar donde estés usando el recurso. Si no es posible, inclúyelo en la sección de créditos.
Por ejemplo: "imagen: Flaticon.com". Esta cabecera se ha diseñado con recursos de Flaticon.com
Si tienes cualquier otra pregunta, consulta la sección de FAQs
Plataformas de video online (Youtube, Vimeo, etc.)
Incluye el siguiente enlace en la sección que disponen las plataformas de vídeo para la descripción del vídeo.>
Si tienes cualquier otra pregunta, consulta la sección de FAQs
Apps, juegos, aplicaciones de escritorio, etc.
Incluye el siguiente enlace en la web donde se descargue tu app o en el apartado destinado a la descripción en la plataforma o marketplace de aplicaciones que utilices.
Si tienes cualquier otra pregunta, consulta la sección de FAQs
¿No quieres atribuir la autoría?
Hazte Premium y podrás utilizar más de 4,383,000 iconos sin atribuir. Más información aquí