BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Font Awesome icon picker con jQuery sin bootstrap

06/ABR/2017 3.111 visitas Ver comentarios
Font Awesome icon picker con jQuery sin bootstrap

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Buscando mejorar los gestores de contenidos que preparo en mis proyectos, me encontré con la necesidad de agregar un selector de iconos basado en la famosa tipografía Font Awesome.

Si no conoces esta tipografía te cuento que, entre sus ventajas, dispone de más de 675 iconos, que te ofrece escalabilidad vectorial, posibilidad de aplicar efectos como sombras, cambios de color, que no requiere javascript, que está servida desde un CDN mucho más que cacheado por todos los servidores y mucho más siendo, su desventaja, su peso si vas a utilizar pocos iconos, es decir, si no vas a realmente aprovechar todo su potencial.

Pues bien, en esta necesidad de incorporar un selector de iconos de Font Awesome, he estado googleando y siempre he dado con versiones hechas basadas en el famoso framework Bootstrap. Quien me conoce, sabe que no soy muy fan de cargar frameworks a los proyectos cuando puedes hacer con muy poco lo mismo que te ofrece... un grid, un popup y una hoja de estilos no tiene una dificultad tan grande como para ser framework-dependiente.

Entonces, a modo casero, he realizado un font awesome icon picker sin bootstrap. Basándome en mis necesidades, he creado un campo de texto con modalidad solo lectura (atributo readonly en true) y un poco de javascript que hace que al hacer foco sobre este campo, se despliega un divisor flotante con todos los iconos representados en modo visual para elegir.

Qué pasa cuando Font Awesome actualice sus iconos

El código está basado en un array enorme de javascript que contiene cada uno de los iconos con lo que, en nuevas versiones de la tipografía, sólo bastaría con agregar los iconos al fichero icos.js que va incluido en la descarga.

Cómo funciona

  • El script buscará que existan campos marcados con una clase específica y cargará el fichero icos.js.
  • Hecho este paso, creará un div flotante oculto que contendrá un gran UL con todos los iconos en modo visual -leer qué queda por hacer-.
  • Creado este divisor, se acoplará al campo de texto y haciendo foco sobre éste, el divisor se tornará visible dejando elegir nuestro icono preferido.
  • Al seleccionar un icono, el divisor flotante se ocultará y el campo de texto tomará el valor indicado en el atributo data-valor de cada uno de los iconos que contiene el código fa-xxxx indicado en esta página.
  • Un poco de CSS y un poco de javascript -jQuery- básico para mostrar y ocultar elementos hacen el resto.

Qué queda por hacer...

  • Queda por hacer que los iconos contengan sus propias palabras clave -keywords- para poder agregar un buscador y así filtrar on-the-fly.
  • Mejorar la presentación del array javascript.

En futuras versiones lo tendrá, I promise :)

Quiero verlo, quiero descargarlo...

Pues bien, para esto tienes las 2 opciones disponibles. La demo la tienes aquí... y la descarga en el botón de descarga que aparece más arriba. 

Simple, sencillo y liviano. No olvides vincular la librería jQuery y la tipografía Font Awesome desde este enlace -porque si la cargas en local, Firefox no la muestra por temas del cross-origin-

Y recuerda, si te sirvió o te ha gustado, compártelo, my friend :)

ACTUALIZACION 07/04/2017

Agregado un buscador para filtrar iconos por su clase (funciona buscando por el valor fa-xxxxx en inglés).

Código 1 - HTML
<div class="picker">
	<input type="text" readonly class="inputpicker" placeholder="Haz click aqu&iacute; para elegir tu icono preferido...">
</div>
Código 2 - CSS
*{margin:0; padding:0;font-family:Arial, sans-serif;border:0;font-weight:400;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	
h1 {text-align:center;margin:30px 0 10px 0}
	.picker {position:relative;width:90%;margin:0 auto}
	.inputpicker {width:100%;padding:10px;background:#f2f2f2}
	
	.oculto {width:100%;background:#f2f2f2;border-radius:0 0 10px 10px;padding:10px;overflow:auto;max-height:200px;display:none}
		.oculto ul {display:inline;float:left;width:100%;margin:0;padding:0}
			.oculto ul li {margin:0;padding:0;display:block;width:30px;height:30px;text-align:center;font-size:15px;font-family:"fontawesome";float:left;cursor:pointer;color:#666;line-height:30px;transition:0.2s all}
			.oculto ul li:hover {background:#FFF;color:#000}
Código 3 - JAVASCRIPT
$(document).ready(function()
{
	$(".picker").each(function()
	{
		div=$(this);
		if (icos)
		{
			var iconos="<ul>";
			for (var i=0; i<icos.length; i++) { iconos+="<li><i data-valor='"+icos[i]+"' class='fa "+icos[i]+"'></i></li>"; }
			iconos+="</ul>";
		}
		div.append("<div class='oculto'>"+iconos+"</div>");
		$(".inputpicker").click(function()
		{
			$(".oculto").fadeToggle("fast");
		});
		$(document).on("click",".oculto ul li",function()
		{
			$(".inputpicker").val($(this).find("i").data("valor"));
			$(".oculto").fadeToggle("fast");
		});		
	});
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 20 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018