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

• Tamaño
• Fondo
• Borde
• Redondeado
• Color

ICONOS   ▶

Iconos

Lista con todos los iconos de la galería... Descargar Josetxu icons 101

• 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

• menus
• menuji-menu
• listji-list
• gridji-grid
• closeji-close
• menu yji-menuy
• menu xji-menux
• menu y circledji-menuycircled
• menu x circledji-menuxcircled

• 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

• social
• socialji-social
• facebookji-facebook
• twitterji-twitter
• googleji-google
• linkedinji-linkedin
• instagramji-instagram
• youtubeji-youtube
• rssji-rss

• 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

COMO USAR   ▶

Como usar

Como funcionan los iconos... Descargar Josetxu icons

Para usar los iconos solo se necesitan dos cosas:

• Elementos HTML
• Estilos CSS

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

◀   ICONOS

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.

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.

Fondo

La galería incluye 7 colores de fondo predefinidos.

Borde

La galería incluye 5 bordes predefinidos.

Redondeado

La galería incluye 6 tipos de redondeado predefinidos.

Color

La galería incluye 13 colores predefinidos para los iconos.

Combinaciones

Estas son algunas de las combinaciones de opciones que se pueden hacer:

◀   COMO USAR

SABER MAS   ▶

Saber más

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:

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

Estilos de iconos

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

icono usuario

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