Iconos

inicio

Inicio Galería de iconos en css... Descargar Josetxu icons

Josetxu icons es una galería de iconos totalmente gratuita, creada solo con CSS usando los pseudo-elementos :before y :after.

  • iconos


    Seguimos creando y añadiendo nuevos iconos
  • simple


    Muy fácil de usar y de sencilla aplicación
  • dinámica


    Cambia las opciones de los iconos fácilmente
  • modificable


    Mejora los iconos añadiendo más detalles

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.

Iconos recientes



  • optionsji-options
  • childji-child
  • headphonesji-headphones
  • magnetji-magnet
  • reloadji-reload
  • bannedji-banned
  • screwdriverji-screwdriver
  • lockji-lock
  • unlockji-unlock
  • pillji-pill
  • commentji-comment
  • mailji-mail
  • bookmarkji-bookmark
  • mapji-map
  • linkji-link
  • starji-star

Opciones

ICONOS   ▶ como usar

Iconos

Iconos Lista con todos los iconos de la galería... Descargar Josetxu icons 101
OPCIONES
ver clases css ninguna clase
seleccionada
  • web
  • homeji-home
  • commentji-comment
  • mailji-mail
  • userji-user
  • bookmarkji-bookmark
  • mapji-map
  • linkji-link
  • starji-star
  • controls
  • playji-play
  • stopji-stop
  • pauseji-pause
  • recji-rec
  • fast forwardji-forward
  • rewindji-rewind
  • slow forwardji-slowforward
  • slow rewindji-slowrewind
  • tools
  • gearji-gear
  • editji-edit
  • hammerji-hammer
  • wrenchji-wrench
  • screwdriverji-screwdriver
  • lockji-lock
  • unlockji-unlock
  • optionsji-options
  • arrows
  • border rightji-arrowborderright
  • border leftji-arrowborderleft
  • border topji-arrowbordertop
  • border bottomji-arrowborderbottom
  • solid rightji-arrowsolidright
  • solid leftji-arrowsolidleft
  • solid topji-arrowsolidtop
  • solid bottomji-arrowsolidbottom
  • multimedia
  • photoji-photo
  • imageji-image
  • videoji-video
  • playerji-player
  • microji-micro
  • soundji-sound
  • muteji-mute
  • mutedji-muted
  • files
  • fileji-file
  • file doubleji-filedouble
  • file textji-filetext
  • new fileji-filenew
  • folderji-folder
  • new folderji-foldernew
  • other folderji-folderother
  • open folderji-folderopen
  • devices
  • desktopji-desktop
  • tabletji-tablet
  • mobileji-mobile
  • mp3ji-mp3
  • headphonesji-headphones
  • discji-disc
  • big discji-discbig
  • pendriveji-pendrive
  • info
  • infoji-info
  • warningji-warning
  • successji-success
  • errorji-error
  • infoji-infocircled
  • warningji-warningcircled
  • successji-successcircled
  • errorji-errorcircled
  • batery
  • battery 0ji-battery0
  • battery 25ji-battery25
  • battery 50ji-battery50
  • battery 75ji-battery75
  • battery 100ji-battery100
  • battery 0/4ji-battery-0-4
  • battery 1/4ji-battery-1-4
  • battery 2/4ji-battery-2-4
  • battery 3/4ji-battery-3-4
  • battery 4/4ji-battery-4-4
  • miscelanea
  • magnetji-magnet
  • reloadji-reload
  • bannedji-banned
  • pillji-pill
  • pill tabletji-pilltablet
  • childji-child
  • cupji-cup
  • beerji-beer
  • wifiji-wifi
  • clockji-clock
  • filled clockji-clockfilled
◀   INICIO saber mas COMO USAR   ▶ como usar

Como usar

Como Usar Como funcionan los iconos... Descargar Josetxu icons

Para usar los iconos solo se necesitan dos cosas:

  • Elementos HTML
  • Estilos CSS
  • <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;
}

Información sobre elementos html y semántica correcta

  • En la galería se usa el elemento <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.
◀   ICONOS saber mas saber mas OPCIONES   ▶

Opciones

Opciones Personaliza los estilos de los iconos... Descargar Josetxu icons

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

Existen varias clases predefinidas para cada una de las diferentes opciones, las tenemos detalladas a continuación:

Tamaño

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; }

Información de tamaños

  • El tamaño por defecto (aplicado en los estilos básicos de iconos) es 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.

Fondo

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; }

Información de los fondos

  • Si no se aplica ningún color de fondo este será transparente.
  • Los fondos Base se colorean junto con el icono al aplicar un cambio de color.
  • Los fondos Claro (light) y Oscuro (dark) mantienen su color aunque se cambie el color del icono.

Limitaciones de los fondos

  • Algunos iconos pueden dar problemas cuando se usan en color blanco, ya que utilizan el valor linear-gradient para la propiedad background y se usa el blanco para emular el fondo. En nuevas versiones se intentará tratar este problema.

Borde

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; }

Redondeado

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; }

Color

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 {
filter: grayscale(100%) brightness(200%); }

Información sobre el color

  • Se usa un color base para poder colorear los iconos, en la galería se usa el naranja, con el valor hexadecimal #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.
  • Puedes cambiar el color base de tu galería reemplazando en la hoja de estilos ese valor hexadecimal por el del color que tu elijas.
  • Al cambiar el color base se modificarán el resto de colores predeterminados, ya que la rotación de tono empezará en un ángulo diferente alrededor del círculo de color por el que se ajustan las muestras de entrada. + info
  • El cambio de color no aplicará a los colores en el rango de color del gris, ya que al no tener un tono de color definido este no puede ser modificado.

Limitaciones del color blanco

  • Para aplicar el color blanco a los iconos hay que tener en cuenta el color de fondo sobre el que estrá el icono, ya que por defecto este es transparente y si el fondo es blanco no se verá el icono.
  • El color blanco aplica solo a los pseudo-elementos before y after, no aplica al borde ni al fondo del icono como si hacen el resto de colores.
  • Hay algunos iconos que no se colorean correctamente al aplicar el color blanco ya que usan el blanco en la propiedad linear-gradient para colorear el fondo. En nuevas versiones se intentará tratar este problema.

Combinaciones

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>
◀   COMO USAR saber mas saber mas SABER MAS   ▶

Saber más

Saber Mas Aprende como crear o mejorar los iconos... Descargar Josetxu icons

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: ejemplos


Si comprendes como funcionan te será muy fácil modificar los iconos o crear los tuyos propios.

Estilos básicos

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.


estilos iconos

html icono base css

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- .


estilos pseudoelementos

html icono base pseudoelementos css

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.

Estilos de iconos

Esto son un par de ejemplos de los estilos necesarios para crear iconos:


icono usuario

html icono usuario css
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.

icono batería

html icono bateria css
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.

Estilos de opciones

Un par de ejemplos de la aplicación de opciones en los iconos:


opcion borde

html icono usuario css
.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

opcion fondo

html icono usuario css
.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

Registro de cambios

  • v1.0 01 08 2019
    • Publicación inicial.
    • 101 iconos en total.
    • Opciones:
      • Tamaño (7)
      • Fondo (7)
      • Borde (5)
      • Redondeado (6)
      • Color (13)
◀   OPCIONES saber mas
copiado al portapapeles

X

Selecciona tu descarga:

Incluye el archivo ji-icons-li.css con los estilos CSS de iconos y opciones.

Incluye el archivo ji-icons-lib.css con los estilos CSS de iconos y opciones. Incluye el archivo ji-icons-list.html con el HTML de todos los iconos.
versión 1.0 DescargarJosetxu iconsBásica