Este proyecto está mantenido por Fonticons, Inc. diseñadores y desarrolladores para diseñadores web. Provee sus productos bajo suscripción pero como podréis ver en la web del proyeto hay una buena colección totalmente gratis. La empresa fue fundada en 2014 y está localizada en Cambridge, Massachussets, USA.
 |
| Ejemplo de algunos iconos Awesome |
Lo mejor es que usarlos es muy sencillo. Puedes colocar los íconos de Font Awesome en cualquier lugar con un prefijo de estilo y el nombre del ícono. Se ha intentado que los iconos adquieran las características y aparezcan junto al texto de forma natural.
Font Awesome está diseñado para ser utilizado con elementos en línea y es recomendable mantener un elemento HTML consistente para hacer referencia a ellos en su proyecto. Por ejemplo <i> <em> o <span> (este último es el que yo uso). Para usar un icono hay que referirse a él usando dos valores; 1) su nombre, con el prefijo fa- y 2) el estilo que desea usar con el prefijo correspondiente. Además hay dos estilos disponibles, Solid y Brands que nos permite alternar entre dos sets de iconos. Pero veamoslo mas claro con un ejemplo:
1. Añadiendo los sets de iconos. Para esto simplemente colocad este código, que contiene todo lo necesario, dentro del <head> de cada plantilla o página:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/regular.css" integrity="sha384-ZlNfXjxAqKFWCwMwQFGhmMh3i89dWDnaFU2/VZg9CvsMGA7hXHQsPIqS+JIAmgEq" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/brands.css" integrity="sha384-rf1bqOAj3+pw6NqYrtaE1/4Se2NBwkIfeYbsFdtiR6TQz0acWiwJbv1IM/Nt/ite" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous"> |
| Tienes disponibles iconos para las pasarelas de pago mas habituales. |
2. Colocar el icono que nos guste o que necesitemos en la web.
<i class="fas fa-android"></i> <!-- Para este icono precisamos 1) prefijo de estilo == fas (solid) y 2) nombre del icono == android -->
<i class="fas fa-android"></i> <!-- Como véis usamos el elemento <i> para referirnos al icono -->
<span class="fas fa-android"></span> <!-- Pero podemos usar otros, como el elemento <span> que vemos en este ejemplo -->
Los iconos de Font Awesome heredan automáticamente el tamaño y el color de CSS. Esto significa que se mezclan con el texto en línea donde sea que los coloques. Font Awesome intenta ser flexible, y establece solo las reglas básicas de estilo que los íconos necesitan representar adecuadamente en contexto.
Para ver las listas de iconos disponibles solo tenéis que hacer clic en este enlace que os llevará a la propia web del proyecto donde podéis consultarlas.
Awesome fonts en el escritorio.
Los iconos de Awesome Fonts se pueden utilizar en el escritorio. Agrega iconos a tus maquetas de diseño, presentaciones y otros sitios. Y para los momentos en que necesite más, se ha incluido versiones SVG vectoriales pulidas de cada ícono por separado.
 |
| Archivo SVG con el icono de Android. |
No hay comentarios:
Publicar un comentario