Josetxu icons INICIO

Josetxu icons es un Set de Iconos totalmente gratuito, creados solo con CSS usando los pseudo-elementos :before y :after.

Actualizado el 10/07/2023

• 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

El set también 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

• puzzle pieceji-puzzle-piece
• rocketji-rocket
• webcamji-webcam
• joystickji-joystick
• dropperji-dropper
• textji-text
• seekji-seek
• gauge dotsji-gauge-dots
• pie chartji-pie-chart
• bar chartji-bar-chart
• saladji-salad
• centeringji-centering
• music noteji-music-note
• panoramicji-panoramic
• bulbji-bulb
• steering wheelji-steering-wheel

Opciones

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

Josetxu icons ICONOS

Aquí puedes ver los 200 iconos que componen el set. He añadido un panel de opciones para probar las diferentes combinaciones directamente en los iconos.

• web
• homeji-home
• home 2ji-home2
• commentji-comment
• mailji-mail
• userji-user
• usersji-users
• bookmarkji-bookmark
• mapji-map
• markerji-marker
• linkji-link
• starji-star
• tagji-tag
• tagsji-tags
• categoryji-category
• categoriesji-categories
• copyrightji-copyright
• copyright circledji-copyrightcircled
• calendarji-calendar
• simple calendarji-calendarsimple
• searchji-search
• seekji-seek

• 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
• equalizerji-equalizer
• opacityji-opacity
• binji-bin
• eraserji-eraser
• open eyeji-eyeopen
• closed eyeji-eyeclosed
• gaugeji-gauge
• gauge dotsji-gauge-dots
• door lockji-doorlock
• uploadji-upload
• downloadji-download
• thermometerji-thermometer
• textji-text
• dropperji-dropper

• menus
• menuji-menu
• listji-list
• gridji-grid
• closeji-close
• menu yji-menuy
• menu xji-menux
• menu y circledji-menuycircled
• menu x circledji-menuxcircled
• left layoutji-layoutleft
• top layoutji-layouttop
• right layoutji-layoutright
• bottom layoutji-layoutbot

• 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
• linear nextji-arrowlinearnext
• linear backji-arrowlinearback
• linear upji-arrowlinearup
• linear downji-arrowlineardown
• curved nextji-arrowcurvednext
• curved backji-arrowcurvedback
• curved upji-arrowcurvedup
• curved downji-arrowcurveddown

• dates
• dateji-date
• 25 eneji-date ji-dt-25 ji-dt-ene
• 28 febji-date ji-dt-28 ji-dt-feb
• 2 marji-date ji-dt-2 ji-dt-mar
• 23 abrji-date ji-dt-23 ji-dt-abr
• 4 mayji-date ji-dt-4 ji-dt-may
• 15 junji-date ji-dt-15 ji-dt-jun
• 7 julji-date ji-dt-7 ji-dt-jul
• 13 agoji-date ji-dt-13 ji-dt-ago
• 28 sepji-date ji-dt-28 ji-dt-sep
• 30 octji-date ji-dt-30 ji-dt-oct
• 16 novji-date ji-dt-16 ji-dt-nov
• 31 dicji-date ji-dt-31 ji-dt-dic

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

• 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
• file jpgji-filetypejpg
• file pngji-filetypepng
• file gifji-filetypegif
• file pdfji-filetypepdf
• file txtji-filetypetxt
• file htmji-filetypehtml
• file cssji-filetypecss
• file phpji-filetypephp
• file jsji-filetypejs

• devices
• desktopji-desktop
• tabletji-tablet
• mobileji-mobile
• mp3ji-mp3
• headphonesji-headphones
• headphones 2ji-headphones2
• discji-disc
• big discji-discbig
• pendriveji-pendrive
• virtual realityji-vr
• fingerprintji-fingerprint
• photo cameraji-photocam
• mouseji-mouse
• monitorji-monitor
• joystickji-joystick
• arcadeji-arcade
• webcamji-webcam

• info
• infoji-info
• warningji-warning
• successji-success
• errorji-error
• infoji-infocircled
• warningji-warningcircled
• successji-successcircled
• errorji-errorcircled

• battery
• 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
• pillsji-pills
• pill tabletji-pilltablet
• childji-child
• cupji-cup
• beerji-beer
• wifiji-wifi
• clockji-clock
• filled clockji-clockfilled
• rounded clockji-clockrounded
• filled rounded clockji-clockfilledrounded
• square clockji-clocksquare
• filled square clockji-clockfilledsquare
• tvji-tv
• balloonji-balloon
• targetji-target
• targetingji-targeting
• targeting 2ji-targeting2
• targeting 3ji-targeting3
• burgerji-burger
• candyji-candy
• olympicsji-olympics
• mountainsji-mountains
• climberji-climber
• routeji-route
• footprintji-footprint
• puzzle pieceji-puzzle-piece
• rocketji-rocket
• pie chartji-pie-chart
• bar chartji-bar-chart
• saladji-salad
• centeringji-centering
• music noteji-music-note
• panoramicji-panoramic
• bulbji-bulb
• steering wheelji-steering-wheel
• steering wheel autoji-steering-wheel-auto

Josetxu icons COMO USAR

Es muy fácil, 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: #2292dd;
	margin-left: 0.9em;
	border-radius: 100%;
}
i.ji-user:after {
	margin-left: 0.650em;
	margin-top: 0.0625em;
	background: #2292dd;
	width: 1.250em;
	height: 0.8125em;
	border-radius: 100% 100% 0 0;
}

/***** Options Icons Styles *****/
/* base border */
.ji-bd-base {
	border-color: #2292dd !important;
}
/* dark background */
.ji-bg-dark {
	background: #343434 !important;
}
	

Josetxu icons OPCIONES

Se incluyen 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

El set incluye 7 tamaños predefinidos.

Fondo

Se incluyen 7 colores de fondo predefinidos.

Borde

Se incluyen 5 bordes predefinidos.

Redondeado

Se incluyen 6 tipos de redondeado predefinidos.

Color

Se incluyen 13 colores predefinidos para los iconos.

Fecha

Se incluyen todas las fechas (con día y mes) del año.

Combinaciones

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

Josetxu icons SABER MAS

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 elemento <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: #2292dd;
  margin-left: 0.9em;
  border-radius: 100%;
}

i.ji-user:after {
  margin-left: 0.650em;
  margin-top: 0.0625em;
  background: #2292dd;
  width: 1.250em;
  height: 0.625em;
  border-radius: 100% 100% 0 0;
}

Con el :before creamos un circulo que será la cabeza del icono.

Con el :after creamos un semicirculo 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 #2292dd;
}

i.ji-battery100:after {
  width: 0.1875em;
  border-left: 1.0625em solid #2292dd;
}

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: #2292dd !important;
}

Con la clase .ji-bd-base modificamos el color del borde que tienen todos los iconos por defecto y aplicamos el color base del set de iconos.

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

• v2.0 10 07 2023
• • Añadidos 25 nuevos iconos.
  • • 200 iconos en total.
  • Modificado 1 icono existente.

• v1.7 15 04 2022
• • Añadidos 24 nuevos iconos.
  • • 175 iconos en total.
  • Modificados 33 iconos existentes.
  • Eliminadas más de 160 sentencias css.
  • Solucionados los errores con el color blanco.

• v1.5 17 04 2020
• • Añadidos 50 nuevos iconos.
  • • 151 iconos en total.
  • Opciones:
  • • Fecha (366)

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