Josetxu icons es una galería de iconos totalmente gratuita, creada solo con CSS usando los pseudo-elementos :before y :after.
La galería incluye algunas opciones básicas para modificar los iconos fácilmente y con un poco de imaginación puedes crear tus propios iconos.
Para usar los iconos solo se necesitan dos cosas:
<i class="ji-user"></i>
<i class="ji-user ji-bd-base"></i>
<i class="ji-user ji-bg-dark"></i>
<i class="ji-user ji-bd-base ji-bg-dark"></i>
/************* JOSETXU ICONS ji-icons CSS *************/ /****** Basic Icons Styles ******/ i[class^="ji-"], i[class*="ji-"] { width: 2.5em; height: 2.5em; border: 0.2em solid transparent; border-radius: 0.0625em; display: inline-block; background: transparent; font-size: 1em; font-style: normal; } i[class^="ji-"]:after , i[class^="ji-"]:before, i[class*="ji-"]:after , i[class*="ji-"]:before { content: " "; float: left; border-radius: 0.125em; } /***** Specific Icons Styles *****/ /* user */ i.ji-user:before { width: 0.750em; height: 0.750em; margin-top: 0.437em; background: #ff6600; margin-left: 0.9em; border-radius: 100%; } i.ji-user:after { margin-left: 0.650em; margin-top: 0.0625em; background: #ff6600; width: 1.250em; height: 0.8125em; border-radius: 100% 100% 0 0; } /***** Options Icons Styles *****/ /* base border */ .ji-bd-base { border-color: #ff6600 !important; } /* dark background */ .ji-bg-dark { background: #343434 !important; }
<i>
por una cuestion práctica y asociativa; es más corto y empieza por i, como "icono", por lo que se prefiere antes que el elemento <span>
, que sería lo correcto semánticamente.Josetxu icons incluye algunas opciones que permiten modificar los iconos fácilmente.
Para aplicar estas opciones se usan clases con el prefijo ji-
que afectarán a distintas propiedades css.
Opción | Prefijo de clase | Propiedad CSS | Ejemplos |
---|---|---|---|
Tamaño | ji-sz- |
font-size | |
Fondo | ji-bg- |
background | |
Borde | ji-bd- |
border-color | |
Redondeado | ji-rd- |
border-radius | |
Color | ji-cl- |
filter | |
Fecha | ji-dt- |
content |
Existen varias clases predefinidas para cada una de las diferentes opciones, las tenemos detalladas a continuación:
La galería incluye 7 tamaños predefinidos.
Clase | HTML | CSS | Icono |
---|---|---|---|
ji-sz-xxs |
<i class="ji-user ji-sz-xxs"></i> |
.ji-sz-xxs { font-size: 0.5em !important; } |
|
ji-sz-xs |
<i class="ji-user ji-sz-xs"></i> |
.ji-sz-xs { font-size: 0.75em !important; } |
|
ji-sz-1 |
<i class="ji-user ji-sz-1"></i> |
.ji-sz-1 { font-size: 1em !important; } |
|
ji-sz-2 |
<i class="ji-user ji-sz-2"></i> |
.ji-sz-2 { font-size: 2em !important; } |
|
ji-sz-3 |
<i class="ji-user ji-sz-3"></i> |
.ji-sz-3 { font-size: 3em !important; } |
|
ji-sz-4 |
<i class="ji-user ji-sz-4"></i> |
.ji-sz-4 { font-size: 4em !important; } |
|
ji-sz-5 |
<i class="ji-user ji-sz-5"></i> |
.ji-sz-5 { font-size: 5em !important; } |
1em
, por lo que la clase ji-sz-1
no es necesario usarla, ya que sin poner ninguna clase se aplicará un tamaño de 1em
por defecto.La galería incluye 7 colores de fondo predefinidos.
Clase | HTML | CSS | Icono |
---|---|---|---|
ji-bg-dark |
<i class="ji-user ji-bg-dark"></i> |
.ji-bg-dark { background: #343434 !important; } |
|
ji-bg-semidark |
<i class="ji-user ji-bg-semidark"></i> |
.ji-bg-semidark { background: #676767 !important; } |
|
ji-bg-semilight |
<i class="ji-user ji-bg-semilight"></i> |
.ji-bg-semilight { background: #999999 !important; } |
|
ji-bg-light |
<i class="ji-user ji-bg-light"></i> |
.ji-bg-light { background: #e6e6e6 !important; } |
|
ji-bg-baselight |
<i class="ji-user ji-bg-baselight"></i> |
.ji-bg-baselight { background: #ffcaa6 !important; } |
|
ji-bg-basedark |
<i class="ji-user ji-bg-basedark"></i> |
.ji-bg-basedark { background: #f60 !important; } |
|
ji-bg-base |
<i class="ji-user ji-bg-base ji-cl-white"></i> |
.ji-bg-base { background: #f60 !important; } |
La galería incluye 5 bordes predefinidos.
Clase | HTML | CSS | Icono |
---|---|---|---|
ji-bd-base |
<i class="ji-user ji-bd-base"></i> |
.ji-bd-base { border-color: #ff6600 !important; } |
|
ji-bd-baselight |
<i class="ji-user ji-bd-baselight"></i> |
.ji-bd-baselight { border-color: #ffcaa6 !important; } |
|
ji-bd-basedark |
<i class="ji-user ji-bd-basedark"></i> |
.ji-bd-basedark { border-color: #ca5100 !important; } |
|
ji-bd-light |
<i class="ji-user ji-bd-light"></i> |
.ji-bd-light { border-color: #ffcaa6 !important; } |
|
ji-bd-dark |
<i class="ji-user ji-bd-dark"></i> |
.ji-bd-dark { border-color: #ca5100 !important; } |
La galería incluye 6 tipos de redondeado predefinidos.
Clase | HTML | CSS | Icono |
---|---|---|---|
ji-rd-xs |
<i class="ji-user ji-bg-dark ji-rd-xs"></i> |
.ji-rd-xs { border-radius: 5% !important; } |
|
ji-rd-1 |
<i class="ji-user ji-bg-dark ji-rd-1"></i> |
.ji-rd-1 { border-radius: 10% !important; } |
|
ji-rd-2 |
<i class="ji-user ji-bg-dark ji-rd-2"></i> |
.ji-rd-2 { border-radius: 20% !important; } |
|
ji-rd-3 |
<i class="ji-user ji-bg-dark ji-rd-3"></i> |
.ji-rd-3 { border-radius: 30% !important; } |
|
ji-rd-4 |
<i class="ji-user ji-bg-dark ji-rd-4"></i> |
.ji-rd-4 { border-radius: 40% !important; } |
|
ji-rd-5 |
<i class="ji-user ji-bg-dark ji-rd-5"></i> |
.ji-rd-5 { border-radius: 100% !important; } |
|
La galería incluye 13 colores predefinidos para los iconos.
Clase | HTML | CSS | Icono |
---|---|---|---|
ji-cl-base |
<i class="ji-user ji-cl-base"></i> |
.ji-cl-base { filter: hue-rotate(0deg); } |
|
ji-cl-brown |
<i class="ji-user ji-cl-brown"></i> |
.ji-cl-brown { filter: hue-rotate(30deg); } |
|
ji-cl-olive |
<i class="ji-user ji-cl-olive"></i> |
.ji-cl-olive { filter: hue-rotate(50deg); } |
|
ji-cl-green |
<i class="ji-user ji-cl-green"></i> |
.ji-cl-green { filter: hue-rotate(100deg); } |
|
ji-cl-bluegreen |
<i class="ji-user ji-cl-bluegreen"></i> |
.ji-cl-bluegreen { filter: hue-rotate(140deg); } |
|
ji-cl-bluegray |
<i class="ji-user ji-cl-bluegray"></i> |
.ji-cl-bluegray { filter: hue-rotate(160deg); } |
|
ji-cl-blue |
<i class="ji-user ji-cl-blue"></i> |
.ji-cl-blue { filter: hue-rotate(200deg); } |
|
ji-cl-purple |
<i class="ji-user ji-cl-purple"></i> |
.ji-cl-purple { filter: hue-rotate(230deg); } |
|
ji-cl-violet |
<i class="ji-user ji-cl-violet"></i> |
.ji-cl-violet { filter: hue-rotate(250deg); } |
|
ji-cl-pink |
<i class="ji-user ji-cl-pink"></i> |
.ji-cl-pink { filter: hue-rotate(290deg); } |
|
ji-cl-red |
<i class="ji-user ji-cl-red"></i> |
.ji-cl-red { filter: hue-rotate(330deg); } |
|
ji-cl-gray |
<i class="ji-user ji-cl-gray"></i> |
.ji-cl-gray { filter: grayscale(100%) opacity(40%); } |
|
ji-cl-white |
<i class="ji-user ji-bg-dark ji-cl-white"></i> |
.ji-cl-white:before, .ji-cl-white:after { |
#FF6600
, por lo que la clase ji-cl-base
no es necesario usarla, ya que sin poner ninguna clase se aplicará el color base por defecto.La galería incluye todas las fechas (con día y mes) del año.
Clase | HTML | CSS | Icono |
---|---|---|---|
ji-date |
<i class="ji-date"></i> |
.ji-date:before { /* estilos especificos de icono */ ; } |
|
ji-dt-1 |
<i class="ji-date ji-dt-1"></i> |
.ji-dt-1 { content: "1" !important; } |
|
ji-dt-31 |
<i class="ji-date ji-dt-31"></i> |
.ji-dt-31 { content: "31" !important; } |
|
ji-dt-ene |
<i class="ji-date ji-dt-ene"></i> |
.ji-dt-ene { content: "ene" !important; } |
|
ji-dt-dic |
<i class="ji-date ji-dt-dic"></i> |
.ji-dt-dic { content: "dic" !important; } |
|
ji-dt-1 |
<i class="ji-date ji-dt-1 ji-dt-ene"></i> |
.ji-dt-1 { content: "1" !important; } |
|
ji-dt-31 |
<i class="ji-date ji-dt-31 ji-dt-dic"></i> |
.ji-dt-31 { content: "31" !important; } |
.ji-dt-1
, .ji-dt-2
, .ji-dt-3
... hasta .ji-dt-31
.ji-dt-jan
... .ji-dt-dec
o en español : .ji-dt-ene
... .ji-dt-dic
.ji-date
. En cualquier otro icono funcionarán, pero el resultado no será el óptimo.Estas son algunas de las combinaciones de opciones que se pueden hacer:
HTML | Icono |
---|---|
<i class="ji-user ji-bd-base ji-rd-5"></i> |
|
<i class="ji-user ji-bg-light"></i> |
|
<i class="ji-user ji-bg-baselight"></i> |
|
<i class="ji-user ji-bg-baselight ji-bd-base ji-rd-2"></i> |
|
<i class="ji-user ji-bg-baselight ji-bd-base ji-rd-5 ji-cl-violet"></i> |
|
<i class="ji-user ji-bg-baselight ji-bd-basedark ji-rd-5 ji-cl-violet"></i> |
|
<i class="ji-user ji-bg-light ji-bd-baselight ji-rd-5 ji-cl-violet"></i> |
|
<i class="ji-user ji-bg-basedark ji-rd-5 ji-cl-violet ji-cl-white"></i> |
La idea de estos iconos es muy básica, usar los pseudo-elementos :before
y :after
para crear diferentes formas. Combinando esas formas con un poco de imaginación conseguiremos crear nuestros iconos.
Un par de ejemplos rápidos:
Si comprendes como funcionan te será muy fácil modificar los iconos o crear los tuyos propios.
Todos los iconos necesitan unos estilos básicos y se los vamos a dar añadiendo el prefijo ji-
delante de la clase que definirá el icono.
También añadiremos unos estilos básicos para los pseudo-elementos :before
y :after
con los que crearemos los iconos más adelante.
i[class^="ji-"], i[class*="ji-"] { width: 2.5em; height: 2.5em; border: 0.2em solid transparent; border-radius: 0.0625em; display: inline-block; background: transparent; font-size: 1em; font-style: normal; }
El selector css i[class^="ji-"] , i[class*="ji-"]
define un cuadrado ligeramente redondeado de 2.5em de lado, con fondo transparente y un borde transparente.
Este selector aplica a cualquier elemento <i>
cuya clase empiece con, o contenga, el prefijo ji-
.
i[class^="ji-"]:after , i[class^="ji-"]:before, i[class*="ji-"]:after , i[class*="ji-"]:before { content: " "; float: left; border-radius: 0.125em; }
A los pseudoelementos :before
y :after
se les declara la propiedad content con el valor " " (vacio), necesario para mostrar este tipo de elementos, y se flotan a la izquierda. El redondeado es opcional.
Los pseudoelementos marcados en rojo en la imagen son solo una representación gráfica, no hay que escribir nada dentro del <i>
.
Estos estilos básicos aplicarán a todos los elementos <i>
que contengan el prefijo ji-
y a los respectivos pseudo-elementos :before
y :after
de dichos elementos <i>
, que es con lo que crearemos los iconos realmente.
Esto son un par de ejemplos de los estilos necesarios para crear iconos:
i.ji-user:before { width: 0.750em; height: 0.750em; margin-top: 0.437em; background: #ff6600; margin-left: 0.9em; border-radius: 100%; } i.ji-user:after { margin-left: 0.650em; margin-top: 0.0625em; background: #ff6600; width: 1.250em; height: 0.8125em; border-radius: 100% 100% 0 0; }
Con el :before
creamos un circulo que será la cabeza del icono.
Con el :after
creamos un semicirculo alargado para el cuerpo del icono.
i.ji-battery100:before { width: 1.1875em; height: 0.5625em; margin-top: 0.8125em; margin-left: 0.4375em; border: 0.1875em solid #ff6600; } i.ji-battery100:after { width: 0.1875em; border-left: 1.0625em solid #ff6600; }
Con el :before
creamos el borde de lo que será cuerpo de la bateria.
Con el :after
creamos la barra de energía y el polo positivo de la pila.
Un par de ejemplos de la aplicación de opciones en los iconos:
.ji-bd-base { border-color: #ff6600 !important; }
Con la clase .ji-bd-base
modificamos el color del borde que tienen todos los iconos por defecto y aplicamos el color base de la galería.
Se pueden crear múltiples clases para los diferentes colores o tonos de color elegidos. info de opción borde
.ji-bg-dark { background: #212121; }
Con la clase .ji-bg-dark
modificamos el color de fondo del icono y aplicamos, en este caso, un color oscuro.
Se pueden crear múltiples clases para los diferentes colores o tonos de fondo elegidos. info de opción fondo
Selecciona tu descarga:
Incluye el archivo ji-icons-li.css con los estilos CSS de iconos y opciones.