/ CSS

Fuentes Geniales en Forma de Iconos

Muchas veces estamos desarrollando nuestras aplicaciones web, y nos damos cuenta que necesitamos algunos iconos para hacer mas atractiva nuestra aplicación, te hago de conocimiento que para poder incluir iconos hermosos en tu aplicación web puedes usar fuentes en forma de iconos.

Lo magnifico de usar estas fuentes en forma de iconos es que puedes manipular sus propiedades con CSS de forma fácil como por ejemplo (tamaño, color).

Este blog utiliza las fuentes de Font Awesome te lo cuento para apaciguar tu curiosidad.

A continuación mencionare algunas de las fuentes que podemos usar y que a su vez son de uso libre.

Font Awesome

Font Awesome usar estas fuentes es tan sencillo como colocar cualquier tag HTML.

Descarga los archivos Font Awesome.

Descomprime en archivo descargado, puedes usar 7-Zip.

Estructura de los archivos:

├── /font-awesome-x.x
|   └── /css
|       ├── font-awesome.css //desarrollo
|       ├── font-awesome.min.css //producción
|   ├── /fonts
|       ├── FontAwesome.otf
|       ├── fontawesome-webfont.eot
|       ├── fontawesome-webfont.svg
|       ├── fontawesome-webfont.ttf
|       ├── fontawesome-webfont.woff
|       ├── fontawesome-webfont.woff2
|   ├── /less
└──────/scss

Copia la carpeta completa nombrada fonts, agrega esta carpeta junto a tus archivos estáticos y por ultimo copia el archivo CSS font-awesome.min.css agrégalo en la carpeta de tus archivos .css por ejemplo.

Recuerda que la carpeta fonts y la carpeta que contenga el archivo font-awesome.min.css deben estar en la misma categoría.

También puedes generar tu link CDN de Font Awesome.

En la sección de icons podrás encontrar todos los iconos que podemos utilizar con Font Awesome.

Código HTML & CSS

Este archivo HTML muestra algunos ejemplos realizados con Font Awesome.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Font Awesome</title>
	<!--
		Cambia la ruta apuntando a tu archivo CSS o genera tu propio link CDN aquí http://fontawesome.io/get-started/
		Gracias!
	-->
    <link rel="stylesheet" href="path/css/font-awesome.min.css">
	<style type="text/css">
		.menu{list-style-type: none;padding-left: 0;}
		.menu li a{color: #4EC9DF;}
		.menu li a:hover{color: #36B7CE;}
		.fa{font-size: 1.5em;margin-bottom: 1em;}
	</style>
</head>
<body>
	<!--Menú-->
	<ul class="menu">
		<li><a href="#"><i class="fa fa-home" aria-hidden="true"></i> Home</a></li>
		<li><a href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> Acerca</a></li>
		<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i> Contacto</a></li>
		<li><a href="#"><i class="fa fa-book" aria-hidden="true"></i> Cursos</a></li>
	</ul>

    <h2>Iconos animados</h2>

	<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

	<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>

	<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>

	<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>

	<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

	<h2>Bordered & Pulled Icons</h2>
	<p>
	<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
	Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.
	</p>
</body>
</html>

Resultado

See the Pen Ejemplo Font Awesome by Luis Rene Mas Mas (@01luisrene) on CodePen.

Ver todos los ejemplos de Font Awesome.


IcoMoon

IcoMoon es una fuente increíble también es muy popular en el mundo del desarrollo web.

Para implementar IcoMoon en nuestro proyecto vamos a realizar algunos ajustes.

Seleccionar Iconos

Seleccionamos los iconos que vamos a utilizar, en mi caso utilizare los iconos de los navegadores web populares.

Generar Fuentes IcoMoon

Una vez seleccionado los iconos haz clic en el botón Generate Fonts.

Lista de Iconos & ver Código

Esta pagina nos muestra todos los iconos que hemos seleccionado, para ver el código presiona en la opción <> Get Code.

Código HTMl IcoMoon

Para este post usaremos el código HTML.

Descargar Fuentes IcoMoon

Para descargar las fuentes IcoMoon presiona en el botón Download.

Descomprime en archivo descargado, puedes usar 7-Zip.

Estructura de los archivos:

├── /icomoom
|   └── /demo-files
|       ├── demo.css 
|       ├── demo.js 
|   ├── /fonts
|       ├── icomoon.eot
|       ├── icomoon.svg
|       ├── icomoon.ttf
|       ├── icomoon.woff
└── index.html
└── selection.json
└── Read Me.txt
└── style.css

En la carpeta demo se encuentran los archivos de ejemplo que son usados en el archivo index.html, en la carpeta fonts están las fuentes en forma de iconos que acabamos de descargar, el archivo index.html como lo mencione nuestra un ejemplo de los iconos, el archivo selection.json guarda el estado de los iconos seleccionados para descarga, el archivo Read Me.txt contiene información importante léelo, el archivo style.css contiene el estilo CSS para generar los iconos.

Código HTML & CSS

Este archivo HTML muestra una lista de Navegadores.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>IcoMoon</title>
	<!--
		Cambia la ruta apuntando a tu archivo .css de IcoMoon
	-->
<link rel="stylesheet" href="style.css">
	<style type="text/css">
		.navegadores__web{list-style-type: none;padding-left: 0;}
		.navegadores__web li a{color: #25E5AD;}
		.navegadores__web li a:hover{color: #3ADDAD;}
		.fa{font-size: 1.5em;margin-bottom: 1em;}
		.icon-chrome{color: #FDD800;}
		.icon-firefox{color: #DC5325;}
		.icon-IE{color: #1EBBEE;}
		.icon-opera{color: #F63727;}
		.icon-safari{color: #006BCE;}
	</style>
</head>
<body>
	<!--Navegadores-->
	<ul class="navegadores__web">
		<li><span class="icon-chrome"></span> <a href="#">Google Chrome</a></li>
		<li><span class="icon-firefox"></span> <a href="#">Firefox</a></li>
		<li><span class="icon-IE"></span> <a href="#">Internet Explorer </a></li>
		<li><span class="icon-opera"></span> <a href="#">Opera</a></li>
		<li><span class="icon-safari"></span> <a href="#">Safari</a></li>
	</ul>
</body>
</html>

Ionicons

Ionicons es una fuente muy buena y también contiene iconos hermosos.

Estas fuentes se pueden descargar he implementar en un proyecto, similar a las fuentes anteriores.

Para este post voy a usar el link CDN de Ionicons.

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

Gama de Iconos Ionicons

En su pagina inicial podemos encontrar toda la gama de iconos que podemos utilizar.

Ionicons - Obtener Nombre de la Clase de un Icono

Para ver el nombre de la clase a utilizar solamente haz clic sobre el icono.

Código HTML & CSS

Este archivo HTML muestra una lista de redes sociales.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>IcoMoon</title>
	<!--Link CDN de Ionicons-->
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
	<style type="text/css">
		.hidden{display: none;}
		a{font-size: 4em;}
		a:not(last-child){
			margin-right: 0.5em;
		}
		.ion-social-facebook{color: #3B5998;}
		.ion-social-twitter{color: #1DA1F2;}
		.ion-social-youtube{color: #E12B28;}
		.ion-social-googleplus{color: #DA2713;}
		.ion-social-github{color: #211F1F;}
	</style>
</head>
<body>
	<!--Redes Sociales-->
	<a class="ion-social-facebook" href="#"><span class="hidden">Facebook</span></a>
	<a class="ion-social-twitter" href="#"><span class="hidden">Twitter</span></a>
	<a class="ion-social-youtube" href="#"><span class="hidden">YouTube</span></a>
	<a class="ion-social-googleplus" href="#"><span class="hidden">Google Plus</span></a>
	<a class="ion-social-github" href="#"><span class="hidden">GitHub</span></a>
</body>
</html>

Resultado

See the Pen Ionicons by Luis Rene Mas Mas (@01luisrene) on CodePen.

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más