Iconos web - Guía rápida

Un icono es un símbolo que se utiliza para representar una acción o capacidad específica en una página web. Los iconos se utilizan tanto en documentos como en aplicaciones y pueden ser seleccionables o no seleccionables. Por ejemplo, las imágenes que vemos en los botones de una aplicación son todos iconos y estos botones son seleccionables. Del mismo modo, cuando utilizamos un icono como logotipo de la empresa, normalmente no se puede seleccionar.

En el entorno Windows, si silenciamos el volumen del sistema, se representará con la ayuda de un icono, como se muestra a continuación.

Usando íconos web, podemos representar una página de carga, una opción deshabilitada, un enlace, una redirección, etc. Estos íconos se pueden voltear, rotar, redimensionar, bordear, invertir y colorear.

Fuentes de iconos

Las fuentes de iconos contienen símbolos y glifos. Una vez que cargue una fuente deseada, puede usar cualquiera de los íconos provistos por esa fuente usando el nombre de clase del ícono. También podemos aplicar diferentes colores a los iconos y redimensionarlos usando las propiedades CSS. Hay varias bibliotecas de iconos (fuentes) que proporcionan iconos. Este tutorial se centra en tres fuentes principales, a saber:

Fuente impresionante
Glifos de Bootstrap
Iconos de material de Google

Fuente impresionante

Esta fuente proporciona 519 iconos vectoriales escalables gratuitos. Esta biblioteca es completamente gratuita, tanto para uso personal como comercial. Estos iconos se pueden personalizar fácilmente. Originalmente, fueron desarrollados para Bootstrap.

Glifos de Bootstrap

Esta es una biblioteca de iconos monocromáticos disponibles en formatos de imágenes rasterizadas, formatos de imágenes vectoriales y como fuentes. Proporciona más de 250 glifos en formato de fuente. Puede utilizar estas fuentes en sus proyectos web. Estos iconos no son gratuitos, sin embargo, puede usarlos en proyectos basados en Bootstrap sin tener que comprarlos.

Iconos de material de Google

Google proporciona alrededor de 750 íconos diseñados bajo "pautas de diseño de material" y se conocen como Material Designiconos. Estos iconos son simples y son compatibles con todos los navegadores web modernos. Dado que estos iconos están basados en vectores, también son escalables. Para utilizar estos iconos, tenemos que cargar la fuente (biblioteca)material-icons.

La biblioteca de iconos Font Awesome proporciona 519 iconos vectoriales escalables gratuitos. Esta biblioteca es completamente gratuita para uso personal y comercial. Diseñados originalmente para Bootstrap, estos íconos se pueden personalizar fácilmente.

Cargando la biblioteca de fuentes

Para cargar la biblioteca Font Awesome, copie y pegue la siguiente línea en la sección <head> de la página web.

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

Usando el icono

Font Awesome proporciona varios iconos. Elija uno de ellos y agregue el nombre de la clase de icono a cualquier elemento HTML dentro de la etiqueta <body>. En el siguiente ejemplo, hemos utilizado el icono de la moneda india.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el tamaño

Puede aumentar o disminuir el tamaño de un icono definiendo su tamaño usando CSS y usándolo junto con el nombre de la clase, como se muestra a continuación. En el ejemplo dado, hemos declarado el tamaño como 6 cm.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el color

Al igual que el tamaño, puede definir el color de los iconos mediante CSS. El siguiente ejemplo muestra cómo cambiar el color del icono de la moneda india.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

Lista de categorías

Font Awesome proporciona 519 iconos en las siguientes categorías:

Iconos de aplicaciones web
Iconos de mano
Iconos de transporte
Iconos de género
Iconos de tipo de archivo
Iconos de Spinner
Iconos de control de formulario
Iconos de pago
Iconos de gráficos
Iconos de moneda
Iconos del editor de texto
Iconos direccionales
Iconos del reproductor de video
Iconos de marca

Para usar cualquiera de estos íconos, debe reemplazar el nombre de la clase en los programas dados en este capítulo con el nombre de la clase del ícono deseado. En los próximos capítulos de esta Unidad (Font Awesome), hemos explicado por categorías el uso y los resultados respectivos de varios iconos de Font Awesome.

Este capítulo explica el uso de los iconos de la aplicación web Font Awesome. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de la aplicación web Font Awesome. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-adjust personalizado"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-archive personalizado"> </i>
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-flechas personalizadas"> </i>
<i class = "fa fa-flechas-h personalizado"> </i>
<i class = "fa fa-flechas-v personalizado"> </i>
<i class = "fa fa-asterisk personalizado"> </i>
<i class = "fa fa-at custom"> </i>
<i class = "fa fa-Automobile custom"> </i>
<i class = "fa fa-balance-scale custom"> </i>
<i class = "fa fa-ban custom"> </i>
<i class = "fa fa-bank custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o custom"> </i>
<i class = "fa fa-código de barras personalizado"> </i>
<i class = "fa fa-bars custom"> </i>
<i class = "fa fa-bed custom"> </i>
<i class = "fa fa-beer custom"> </i>
<i class = "fa fa-bell custom"> </i>
<i class = "fa fa-wrench custom"> </i>
<i class = "fa fa-bell-o custom"> </i>
<i class = "fa fa-bell-slash custom"> </i>
<i class = "fa fa-bell-slash-o custom"> </i>
<i class = "fa fa-bicycle custom"> </i>
<i class = "fa fa-battery-0 custom"> </i>
<i class = "fa fa-battery-1 custom"> </i>
<i class = "fa fa-battery-2 custom"> </i>
<i class = "fa fa-battery-3 custom"> </i>
<i class = "fa fa-battery-4 custom"> </i>
<i class = "fa fa-battery-empty custom"> </i>
<i class = "fa fa-battery-quarter custom"> </i>
<i class = "fa fa-battery-half custom"> </i>
<i class = "fa fa-battery-three-quarters custom"> </i>
<i class = "fa fa-battery-full custom"> </i>
<i class = "fa fa-birthday-cake custom"> </i>
<i class = "fa fa-bolt custom"> </i>
<i class = "fa fa-bomb custom"> </i>
<i class = "fa fa-book custom"> </i>
<i class = "fa fa-bookmark custom"> </i>
<i class = "fa fa-bookmark-o custom"> </i>
<i class = "fa fa-maletín personalizado"> </i>
<i class = "fa fa-bug custom"> </i>
<i class = "fa fa-building custom"> </i>
<i class = "fa fa-building-o custom"> </i>
<i class = "fa fa-bullhorn custom"> </i>
<i class = "fa fa-bullseye custom"> </i>
<i class = "fa fa-bus custom"> </i>
<i class = "fa fa-cab custom"> </i>
<i class = "fa fa-video-camera custom"> </i>
<i class = "fa fa-calendar personalizado"> </i>
<i class = "fa fa-calendar-check-o custom"> </i>
<i class = "fa fa-calendar-minus-o custom"> </i>
<i class = "fa fa-calendar-o custom"> </i>
<i class = "fa fa-calendar-plus-o custom"> </i>
<i class = "fa fa-calendar-times-o custom"> </i>
<i class = "fa fa-camera custom"> </i>
<i class = "fa fa-camera-retro custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-cc personalizado"> </i>
<i class = "fa fa-caret-square-o-down custom"> </i>
<i class = "fa fa-caret-square-o-left personalizado"> </i>
<i class = "fa fa-caret-square-o-right personalizado"> </i>
<i class = "fa fa-caret-square-o-up custom"> </i>
<i class = "fa fa-cart-arrow-down custom"> </i>
<i class = "fa fa-cart-plus custom"> </i>
<i class = "fa fa-certificate custom"> </i>
<i class = "fa fa-child custom"> </i>
<i class = "fa fa-check custom"> </i>
<i class = "fa fa-check-circle custom"> </i>
<i class = "fa fa-check-circle-o custom"> </i>
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle personalizado"> </i>
<i class = "fa fa-circle-o custom"> </i>
<i class = "fa fa-circle-o-notch custom"> </i>
<i class = "fa fa-circle-thin custom"> </i>
<i class = "fa fa-clock-o custom"> </i>
<i class = "fa fa-clone custom"> </i>
<i class = "fa fa-close custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-cloud-download custom"> </i>
<i class = "fa fa-cloud-upload custom"> </i>
<i class = "fa fa-code custom"> </i>
<i class = "fa fa-code-fork personalizado"> </i>
<i class = "fa fa-coffee custom"> </i>
<i class = "fa fa-cog custom"> </i>
<i class = "fa fa-cogs custom"> </i>
<i class = "fa fa-comment custom"> </i>
<i class = "fa fa-comment-o custom"> </i>
<i class = "fa fa-commenting custom"> </i>
<i class = "fa fa-commenting-o custom"> </i>
<i class = "fa fa-comments custom"> </i>
<i class = "fa fa-comments-o custom"> </i>
<i class = "fa fa-compass custom"> </i>
<i class = "fa fa-copyright custom"> </i>
<i class = "fa fa-creative-commons custom"> </i>
<i class = "fa fa-credit-card custom"> </i>
<i class = "fa fa-crop custom"> </i>
<i class = "fa fa-crosshairs custom"> </i>
<i class = "fa fa-cube custom"> </i>
<i class = "fa fa-cubes custom"> </i>
<i class = "fa fa-cutlery custom"> </i>
<i class = "fa fa-dashboard custom"> </i>
<i class = "fa fa-database custom"> </i>
<i class = "fa fa-desktop custom"> </i>
<i class = "fa fa-diamond custom"> </i>
<i class = "fa fa-dot-circle-o custom"> </i>
<i class = "fa fa-download custom"> </i>
<i class = "fa fa-edit custom"> </i>
<i class = "fa fa-ellipsis-h custom"> </i>
<i class = "fa fa-ellipsis-v custom"> </i>
<i class = "fa fa-sobre personalizado"> </i>
<i class = "fa fa-sobre-o custom"> </i>
<i class = "fa fa-sobre-cuadrado personalizado"> </i>
<i class = "fa fa-eraser custom"> </i>
<i class = "fa fa-exchange custom"> </i>
<i class = "fa fa-exclamation custom"> </i>
<i class = "fa fa-exclamation-circle custom"> </i>
<i class = "fa fa-exclamation-triangle custom"> </i>
<i class = "fa fa-external-link custom"> </i>
<i class = "fa fa-external-link-square custom"> </i>
<i class = "fa fa-eye custom"> </i>
<i class = "fa fa-eye-slash custom"> </i>
<i class = "fa fa-eyedropper custom"> </i>
<i class = "fa fa-fax custom"> </i>
<i class = "fa fa-feed personalizado"> </i>
<i class = "fa fa-female custom"> </i>
<i class = "fa fa-fighter-jet custom"> </i>
<i class = "fa fa-file-archive-o custom"> </i>
<i class = "fa fa-file-audio-o custom"> </i>
<i class = "fa fa-file-code-o custom"> </i>
<i class = "fa fa-file-excel-o custom"> </i>
<i class = "fa fa-volume-down custom"> </i>
<i class = "fa fa-file-movie-o custom"> </i>
<i class = "fa fa-file-pdf-o custom"> </i>
<i class = "fa fa-file-photo-o custom"> </i>
<i class = "fa fa-file-picture-o custom"> </i>
<i class = "fa fa-file-powerpoint-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-zip-o custom"> </i>
<i class = "fa fa-film custom"> </i>
<i class = "fa fa-filter personalizado"> </i>
<i class = "fa fa-fire custom"> </i>
<i class = "fa fa-extintor personalizado"> </i>
<i class = "fa fa-flag custom"> </i>
<i class = "fa fa-flag-checkered custom"> </i>
<i class = "fa fa-flag-o custom"> </i>
<i class = "fa fa-flash custom"> </i>
<i class = "fa fa-flask custom"> </i>
<i class = "fa fa-flask custom"> </i>
<i class = "fa fa-folder personalizado"> </i>
<i class = "fa fa-folder-o custom"> </i>
<i class = "fa fa-folder-open custom"> </i>
<i class = "fa fa-folder-open-o custom"> </i>
<i class = "fa fa-frown-o custom"> </i>
<i class = "fa fa-volume-off custom"> </i>
<i class = "fa fa-gamepad custom"> </i>
<i class = "fa fa-gavel custom"> </i>
<i class = "fa fa-gear custom"> </i>
<i class = "fa fa-gears custom"> </i>
<i class = "fa fa-gift custom"> </i>
<i class = "fa fa-glass custom"> </i>
<i class = "fa fa-globe custom"> </i>
<i class = "fa fa-graduation-cap custom"> </i>
<i class = "fa fa-group custom"> </i>
<i class = "fa fa-hand-grab-o custom"> </i>
<i class = "fa fa-hand-lizard-o custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hand-peace-o custom"> </i>
<i class = "fa fa-hand-pointer-o custom"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-scissors-o custom"> </i>
<i class = "fa fa-hand-spock-o custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hdd-o custom"> </i>
<i class = "fa fa-auriculares personalizados"> </i>
<i class = "fa fa-heart custom"> </i>
<i class = "fa fa-heart-o custom"> </i>
<i class = "fa fa-heartbeat custom"> </i>
<i class = "fa fa-history custom"> </i>
<i class = "fa fa-home custom"> </i>
<i class = "fa fa-hotel custom"> </i>
<i class = "fa fa-hourglass custom"> </i>
<i class = "fa fa-hourglass-start custom"> </i>
<i class = "fa fa-hourglass-half custom"> </i>
<i class = "fa fa-hourglass-end custom"> </i>
<i class = "fa fa-i-cursor personalizado"> </i>
<i class = "fa fa-image custom"> </i>
<i class = "fa fa-inbox custom"> </i>
<i class = "fa fa-industry custom"> </i>
<i class = "fa fa-info custom"> </i>
<i class = "fa fa-info-circle custom"> </i>
<i class = "fa fa-Institution custom"> </i>
<i class = "fa fa-key custom"> </i>
<i class = "fa fa-keyboard-o custom"> </i>
<i class = "fa fa-language custom"> </i>
<i class = "fa fa-laptop custom"> </i>
<i class = "fa fa-leaf custom"> </i>
<i class = "fa fa-legal custom"> </i>
<i class = "fa fa-lemon-o custom"> </i>
<i class = "fa fa-level-down custom"> </i>
<i class = "fa fa-level-up custom"> </i>
<i class = "fa fa-life-bouy custom"> </i>
<i class = "fa fa-life-ring custom"> </i>
<i class = "fa fa-life-saver custom"> </i>
<i class = "fa fa-lightbulb-o custom"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-location-arrow custom"> </i>
<i class = "fa fa-lock custom"> </i>
<i class = "fa fa-magic custom"> </i>
<i class = "fa fa-magnet custom"> </i>
<i class = "fa fa-mail-forward custom"> </i>
<i class = "fa fa-mail-reply custom"> </i>
<i class = "fa fa-mail-reply-all custom"> </i>
<i class = "fa fa-male custom"> </i>
<i class = "fa fa-map personalizado"> </i>
<i class = "fa fa-map-marker custom"> </i>
<i class = "fa fa-map-o custom"> </i>
<i class = "fa fa-map-pin custom"> </i>
<i class = "fa fa-map-signs custom"> </i>
<i class = "fa fa-meh-o custom"> </i>
<i class = "fa fa-micrófono personalizado"> </i>
<i class = "fa fa-microfono-barra personalizada"> </i>
<i class = "fa fa-minus custom"> </i>
<i class = "fa fa-minus-circle personalizado"> </i>
<i class = "fa fa-minus-square custom"> </i>
<i class = "fa fa-minus-square-o custom"> </i>
<i class = "fa fa-mobile custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-moon-o custom"> </i>
<i class = "fa fa-mortar-board custom"> </i>
<i class = "fa fa-motocicleta personalizada"> </i>
<i class = "fa fa-mouse-pointer custom"> </i>
<i class = "fa fa-music custom"> </i>
<i class = "fa fa-users custom"> </i>
<i class = "fa fa-object-group custom"> </i>
<i class = "fa fa-object-ungroup custom"> </i>
<i class = "fa fa-paint-brush custom"> </i>
<i class = "fa fa-paper-plane custom"> </i>
<i class = "fa fa-paper-plane-o custom"> </i>
<i class = "fa fa-paw custom"> </i>
<i class = "fa fa-pencil custom"> </i>
<i class = "fa fa-pencil-square custom"> </i>
<i class = "fa fa-pencil-square-o custom"> </i>
<i class = "fa fa-phone custom"> </i>
<i class = "fa fa-phone custom"> </i>
<i class = "fa fa-photo custom"> </i>
<i class = "fa fa-picture-o custom"> </i>
<i class = "fa fa-pie-chart custom"> </i>
<i class = "fa fa-plane custom"> </i>
<i class = "fa fa-volume-up custom"> </i>
<i class = "fa fa-plus custom"> </i>
<i class = "fa fa-plus-circle custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o custom"> </i>
<i class = "fa fa-power-off custom"> </i>
<i class = "fa fa-print custom"> </i>
<i class = "fa fa-puzzle-piece custom"> </i>
<i class = "fa fa-qrcode custom"> </i>
<i class = "fa fa-question custom"> </i>
<i class = "fa fa-question-circle custom"> </i>
<i class = "fa fa-quote-left personalizado"> </i>
<i class = "fa fa-quote-right personalizado"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-recycling custom"> </i>
<i class = "fa fa-refresh personalizado"> </i>
<i class = "fa fa-registration custom"> </i>
<i class = "fa fa-remove custom"> </i>
<i class = "fa-reorder custom"> </i>
<i class = "fa fa-reply personalizado"> </i>
<i class = "fa fa-reply-all custom"> </i>
<i class = "fa fa-retweet personalizado"> </i>
<i class = "fa fa-road custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-rss custom"> </i>
<i class = "fa fa-rss-square custom"> </i>
<i class = "fa fa-search custom"> </i>
<i class = "fa fa-search-minus custom"> </i>
<i class = "fa fa-search-plus custom"> </i>
<i class = "fa fa-send custom"> </i>
<i class = "fa fa-send-o custom"> </i>
<i class = "fa fa-server personalizado"> </i>
<i class = "fa fa-share custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square personalizado"> </i>
<i class = "fa fa-share-alt-o custom"> </i>
<i class = "fa fa-shield personalizado"> </i>
<i class = "fa fa-ship custom"> </i>
<i class = "fa fa-shopping-cart custom"> </i>
<i class = "fa fa-sign-in custom"> </i>
<i class = "fa fa-sign-out custom"> </i>
<i class = "fa fa-signal custom"> </i>
<i class = "fa fa-sitemap custom"> </i>
<i class = "fa fa-sliders custom"> </i>
<i class = "fa fa-smile-o custom"> </i>
<i class = "fa fa-warning custom"> </i>
<i class = "fa fa-sort custom"> </i>
<i class = "fa fa-sort-alpha-asc personalizado"> </i>
<i class = "fa fa-sort-alpha-desc custom"> </i>
<i class = "fa fa-sort-asc custom"> </i>
<i class = "fa fa-sort-desc custom"> </i>
<i class = "fa fa-sort-down custom"> </i>
<i class = "fa fa-sort-numeric-asc personalizado"> </i>
<i class = "fa fa-sort-numeric-desc personalizado"> </i>
<i class = "fa fa-sort-up custom"> </i>
<i class = "fa fa-space-shuttle custom"> </i>
<i class = "fa fa-spinner custom"> </i>
<i class = "fa fa-spoon custom"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o custom"> </i>
<i class = "fa fa-star custom"> </i>
<i class = "fa fa-star-half custom"> </i>
<i class = "fa fa-star-half-empty custom"> </i>
<i class = "fa fa-star-half-full custom"> </i>
<i class = "fa fa-star-half-o custom"> </i>
<i class = "fa fa-star-o custom"> </i>
<i class = "fa fa-sticky-note custom"> </i>
<i class = "fa fa-sticky-note-o custom"> </i>
<i class = "fa fa-street-view custom"> </i>
<i class = "fa fa-suitcase custom"> </i>
<i class = "fa fa-sun-o custom"> </i>
<i class = "fa fa-support custom"> </i>
<i class = "fa fa-tablet custom"> </i>
<i class = "fa fa-tachometer custom"> </i>
<i class = "fa fa-tag custom"> </i>
<i class = "fa fa-tags personalizados"> </i>
<i class = "fa fa-tasks custom"> </i>
<i class = "fa fa-taxi custom"> </i>
<i class = "fa fa-television custom"> </i>
<i class = "fa fa-terminal custom"> </i>
<i class = "fa fa-thumb-tack custom"> </i>
<i class = "fa fa-thumbs-down custom"> </i>
<i class = "fa fa-ticket custom"> </i>
<i class = "fa fa-times custom"> </i>
<i class = "fa fa-times-circle custom"> </i>
<i class = "fa fa-times-circle-o custom"> </i>
<i class = "fa fa-tint custom"> </i>
<i class = "fa fa-toggle-down custom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-off custom"> </i>
<i class = "fa fa-toggle-on custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-marca registrada personalizada"> </i>
<i class = "fa fa-tras custom"> </i>
<i class = "fa fa-trash-o custom"> </i>
<i class = "fa fa-tree custom"> </i>
<i class = "fa fa-trophy custom"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>
<i class = "fa fa-tv custom"> </i>
<i class = "fa fa-umbrella custom"> </i>
<i class = "fa fa-university custom"> </i>
<i class = "fa fa-unlock personalizado"> </i>
<i class = "fa fa-unlock-alt custom"> </i>
<i class = "fa fa-unsorted custom"> </i>
<i class = "fa fa-upload personalizado"> </i>
<i class = "fa fa-user custom"> </i>
<i class = "fa fa-user-plus custom"> </i>
<i class = "fa fa-user-secret personalizado"> </i>
<i class = "fa fa-user-times custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Hand. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Hand. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-o-left custom"> </i>
<i class = "fa fa-hand-paper-o custom"> </i>
<i class = "fa fa-hand-rock-o custom"> </i>
<i class = "fa fa-hand-stop-o custom"> </i>
<i class = "fa fa-thumbs-o-up custom"> </i>
<i class = "fa fa-hand-lizard-o custom"> </i>
<i class = "fa fa-hand-o-right custom"> </i>
<i class = "fa fa-hand-peace-o custom"> </i>
<i class = "fa fa-hand-scissors-o custom"> </i>
<i class = "fa fa-thumbs-down custom"> </i>
<i class = "fa fa-thumbs-up custom"> </i>
<i class = "fa fa-hand-o-up custom"> </i>
<i class = "fa fa-hand-pointer-o custom"> </i>
<i class = "fa fa-hand-spock-o custom"> </i>
<i class = "fa fa-thumbs-o-down custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Transportation. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Transportation. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-Automobile custom"> </i>
<i class = "fa fa-bicycle custom"> </i>
<i class = "fa fa-bus custom"> </i>
<i class = "fa fa-cab custom"> </i>
<i class = "fa fa-car custom"> </i>
<i class = "fa fa-fighter-jet custom"> </i>
<i class = "fa fa-motocicleta personalizada"> </i>
<i class = "fa fa-plane custom"> </i>
<i class = "fa fa-rocket custom"> </i>
<i class = "fa fa-ship custom"> </i>
<i class = "fa fa-space-shuttle custom"> </i>
<i class = "fa fa-subway custom"> </i>
<i class = "fa fa-taxi custom"> </i>
<i class = "fa fa-train personalizado"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Este capítulo explica el uso de los iconos de género Font Awesome. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los íconos Font Awesome Gender. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-genderless custom"> </i>
<i class = "fa fa-intersex custom"> </i>
<i class = "fa fa-mars custom"> </i>
<i class = "fa fa-mars-double custom"> </i>
<i class = "fa fa-mars-stroke custom"> </i>
<i class = "fa fa-mars-stroke-h custom"> </i>
<i class = "fa fa-mars-stroke-v personalizado"> </i>
<i class = "fa fa-mercury custom"> </i>
<i class = "fa fa-neuter custom"> </i>
<i class = "fa fa-transgender custom"> </i>
<i class = "fa fa-transgender-alt custom"> </i>
<i class = "fa fa-venus custom"> </i>
<i class = "fa fa-venus-double custom"> </i>
<i class = "fa fa-venus-mars custom"> </i>

Este capítulo explica el uso de los iconos de tipo de archivo Font Awesome. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de tipo de archivo Font Awesome. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-file personalizado"> </i>
<i class = "fa fa-file-archive-o custom"> </i>
<i class = "fa fa-file-audio-o custom"> </i>
<i class = "fa fa-file-code-o custom"> </i>
<i class = "fa fa-file-excel-o custom"> </i>
<i class = "fa fa-file-image-o custom"> </i>
<i class = "fa fa-file-movie-o custom"> </i>
<i class = "fa fa-file-o custom"> </i>
<i class = "fa fa-file-pdf-o custom"> </i>
<i class = "fa fa-file-photo-o custom"> </i>
<i class = "fa fa-file-picture-o custom"> </i>
<i class = "fa fa-file-powerpoint-o custom"> </i>
<i class = "fa fa-file-video-o custom"> </i>
<i class = "fa fa-file-word-o custom"> </i>
<i class = "fa fa-file-zip-o custom"> </i>
<i class = "fa fa-file-sound-o custom"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Spinner. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Spinner. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-circle-o-notch custom"> </i>
<i class = "fa fa-cog custom"> </i>
<i class = "fa fa-gear custom"> </i>
<i class = "fa fa-refresh personalizado"> </i>
<i class = "fa fa-spinner custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Form Control. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Form Control. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle personalizado"> </i>
<i class = "fa fa-circle-o custom"> </i>
<i class = "fa fa-dot-circle-o custom"> </i>
<i class = "fa fa-minus-square custom"> </i>
<i class = "fa fa-minus-square-o custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-plus-square-o custom"> </i>
<i class = "fa fa-square custom"> </i>
<i class = "fa fa-square-o custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Payment. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los íconos de Font Awesome Payment. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-cc-amex personalizado"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-discover custom"> </i>
<i class = "fa fa-cc-jcb personalizado"> </i>
<i class = "fa fa-cc-mastercard personalizado"> </i>
<i class = "fa fa-cc-paypal custom"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa fa-credit-card custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Chart. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Chart. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-bar-chart custom"> </i>
<i class = "fa fa-bar-chart-o custom"> </i>
<i class = "fa fa-line-chart custom"> </i>
<i class = "fa fa-pie-chart custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Currency. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de moneda de Font Awesome. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-bitcoin personalizado"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-cny custom"> </i>
<i class = "fa fa-dollar custom"> </i>
<i class = "fa fa-eur custom"> </i>
<i class = "fa fa-euro custom"> </i>
<i class = "fa fa-gbp custom"> </i>
<i class = "fa fa-gg custom"> </i>
<i class = "fa fa-gg-circle custom"> </i>
<i class = "fa fa-ils custom"> </i>
<i class = "fa fa-inr custom"> </i>
<i class = "fa fa-jpy custom"> </i>
<i class = "fa fa-krw custom"> </i>
<i class = "fa fa-money custom"> </i>
<i class = "fa fa-rmb custom"> </i>
<i class = "fa fa-ruble custom"> </i>
<i class = "fa fa-rub custom"> </i>
<i class = "fa fa-ruble custom"> </i>
<i class = "fa fa-rupee custom"> </i>
<i class = "fa fa-shekel custom"> </i>
<i class = "fa fa-sheqel custom"> </i>
<i class = "fa fa-try custom"> </i>
<i class = "fa fa-turkish-lira custom"> </i>
<i class = "fa fa-usd custom"> </i>
<i class = "fa fa-won custom"> </i>
<i class = "fa fa-yen custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Text Editor. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos del Editor de texto Font Awesome. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-align-center custom"> </i>
<i class = "fa fa-align-justify personalizado"> </i>
<i class = "fa fa-align-left custom"> </i>
<i class = "fa fa-align-right custom"> </i>
<i class = "fa fa-bold custom"> </i>
<i class = "fa fa-chain custom"> </i>
<i class = "fa fa-chain-broken-custom"> </i>
<i class = "fa fa-clipboard custom"> </i>
<i class = "fa fa-columnas personalizadas"> </i>
<i class = "fa fa-copy custom"> </i>
<i class = "fa fa-cut custom"> </i>
<i class = "fa fa-dedent custom"> </i>
<i class = "fa fa-eraser custom"> </i>
<i class = "fa fa-file personalizado"> </i>
<i class = "fa fa-file-o custom"> </i>
<i class = "fa fa-file-text custom"> </i>
<i class = "fa fa-file-text-o custom"> </i>
<i class = "fa fa-files-o custom"> </i>
<i class = "fa fa-floppy-o custom"> </i>
<i class = "fa fa-font custom"> </i>
<i class = "fa fa-header custom"> </i>
<i class = "fa fa-indent custom"> </i>
<i class = "fa fa-italic custom"> </i>
<i class = "fa fa-link personalizado"> </i>
<i class = "fa fa-list custom"> </i>
<i class = "fa fa-list-alt custom"> </i>
<i class = "fa fa-list-ol custom"> </i>
<i class = "fa fa-list-ul custom"> </i>
<i class = "fa fa-outdent custom"> </i>
<i class = "fa fa-paperclip custom"> </i>
<i class = "fa fa-paragraph personalizado"> </i>
<i class = "fa fa-paste custom"> </i>
<i class = "fa fa-repeat custom"> </i>
<i class = "fa fa-rotate-left custom"> </i>
<i class = "fa fa-rotate-right custom"> </i>
<i class = "fa fa-save custom"> </i>
<i class = "fa fa-scissors custom"> </i>
<i class = "fa fa-tachado personalizado"> </i>
<i class = "fa fa-subscript custom"> </i>
<i class = "fa fa-table custom"> </i>
<i class = "fa fa-text-heigh custom"> </i>
<i class = "fa fa-text-width custom"> </i>
<i class = "fa fa-th custom"> </i>
<i class = "fa fa-th-large custom"> </i>
<i class = "fa fa-th-list personalizada"> </i>
<i class = "fa fa-underline custom"> </i>
<i class = "fa fa-undo custom"> </i>
<i class = "fa fa-unlink custom"> </i>

Este capítulo explica el uso de los iconos direccionales de Font Awesome. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos direccionales de Font Awesome. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "fa fa-angle-double-down custom"> </i>
<i class = "fa fa-angle-double-left custom"> </i>
<i class = "fa fa-angle-double-right-custom"> </i>
<i class = "fa fa-angle-double-up custom"> </i>
<i class = "fa fa-angle-down custom"> </i>
<i class = "fa fa-angle-left custom"> </i>
<i class = "fa fa-angle-right custom"> </i>
<i class = "fa fa-angle-up custom"> </i>
<i class = "fa fa-arrow-circle-down custom"> </i>
<i class = "fa fa-arrow-circle-left custom"> </i>
<i class = "fa fa-arrow-circle-right custom"> </i>
<i class = "fa fa-arrow-circle-up custom"> </i>
<i class = "fa fa-arrow-circle-o-down custom"> </i>
<i class = "fa fa-arrow-circle-o-left custom"> </i>
<i class = "fa fa-arrow-circle-o-right custom"> </i>
<i class = "fa fa-arrow-circle-o-up custom"> </i>
<i class = "fa fa-arrow-down custom"> </i>
<i class = "fa fa-arrow-left personalizado"> </i>
<i class = "fa fa-arrow-right custom"> </i>
<i class = "fa fa-arrow-up custom"> </i>
<i class = "fa fa-flechas personalizadas"> </i>
<i class = "fa fa-flechas-alt personalizado"> </i>
<i class = "fa fa-flechas-h personalizado"> </i>
<i class = "fa fa-flechas-v personalizado"> </i>
<i class = "fa fa-caret-down custom"> </i>
<i class = "fa fa-caret-left custom"> </i>
<i class = "fa fa-caret-right custom"> </i>
<i class = "fa fa-caret-up custom"> </i>
<i class = "fa fa-caret-square-o-down custom"> </i>
<i class = "fa fa-caret-square-o-left personalizado"> </i>
<i class = "fa fa-caret-square-o-right personalizado"> </i>
<i class = "fa fa-caret-square-o-up custom"> </i>
<i class = "fa fa-chevron-circle-down custom"> </i>
<i class = "fa fa-chevron-circle-left personalizado"> </i>
<i class = "fa fa-chevron-circle-right personalizado"> </i>
<i class = "fa fa-chevron-circle-up custom"> </i>
<i class = "fa fa-chevron-down custom"> </i>
<i class = "fa fa-chevron-left custom"> </i>
<i class = "fa fa-chevron-right custom"> </i>
<i class = "fa fa-chevron-up custom"> </i>
<i class = "fa fa-hand-o-down custom"> </i>
<i class = "fa fa-hand-o-left custom"> </i>
<i class = "fa fa-hand-o-right custom"> </i>
<i class = "fa fa-hand-o-up custom"> </i>
<i class = "fa fa-long-arrow-down custom"> </i>
<i class = "fa fa-long-arrow-left-custom"> </i>
<i class = "fa fa-long-arrow-right personalizado"> </i>
<i class = "fa fa-long-arrow-up custom"> </i>
<i class = "fa fa-toggle-down custom"> </i>
<i class = "fa fa-toggle-left custom"> </i>
<i class = "fa fa-toggle-right custom"> </i>
<i class = "fa fa-toggle-up custom"> </i>
<i class = "fa fa-exchange custom"> </i>

Este capítulo explica el uso de los iconos del reproductor de video Font Awesome. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Video Player. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Iconos
<i class = "fa fa-flechas-alt personalizado"> </i>
<i class = "fa fa-backward custom"> </i>
<i class = "fa fa-compress personalizado"> </i>
<i class = "fa fa-eject custom"> </i>
<i class = "fa fa-expand custom"> </i>
<i class = "fa fa-fast-backward custom"> </i>
<i class = "fa fa-fast-forward custom"> </i>
<i class = "fa fa-forward custom"> </i>
<i class = "fa fa-play-circle custom"> </i>
<i class = "fa fa-play-circle-o custom"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-step-backward custom"> </i>
<i class = "fa fa-stop custom"> </i>
<i class = "fa fa-pause custom"> </i>
<i class = "fa fa-play custom"> </i>
<i class = "fa fa-youtube-play custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Brand. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Brand. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Iconos
<i class = "fa fa-500px personalizado"> </i>
<i class = "fa fa-amazon custom"> </i>
<i class = "fa fa-android custom"> </i>
<i class = "fa fa-angellist custom"> </i>
<i class = "fa fa-adn custom"> </i>
<i class = "fa fa-apple custom"> </i>
<i class = "fa fa-behance custom"> </i>
<i class = "fa fa-behance-square custom"> </i>
<i class = "fa fa-bitbucket custom"> </i>
<i class = "fa fa-bitbucket-square personalizado"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-black-tie custom"> </i>
<i class = "fa fa-btc custom"> </i>
<i class = "fa fa-buysellads custom"> </i>
<i class = "fa fa-cc-amex personalizado"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-discover custom"> </i>
<i class = "fa fa-cc-jcb personalizado"> </i>
<i class = "fa fa-cc-mastercard personalizado"> </i>
<i class = "fa fa-cc-paypal custom"> </i>
<i class = "fa fa-cc-stripe custom"> </i>
<i class = "fa fa-cc-visa custom"> </i>
<i class = "fa fa-chrome personalizado"> </i>
<i class = "fa fa-codepen custom"> </i>
<i class = "fa fa-connectdevelop custom"> </i>
<i class = "fa fa-contao custom"> </i>
<i class = "fa fa-css3 personalizado"> </i>
<i class = "fa fa-dashcube custom"> </i>
<i class = "fa fa-delicious custom"> </i>
<i class = "fa fa-deviantart personalizado"> </i>
<i class = "fa fa-digg custom"> </i>
<i class = "fa fa-dribbble custom"> </i>
<i class = "fa fa-dropbox custom"> </i>
<i class = "fa fa-drupal custom"> </i>
<i class = "fa fa-empire custom"> </i>
<i class = "fa fa-expeditedssl custom"> </i>
<i class = "fa fa-facebook custom"> </i>
<i class = "fa fa-facebook-f custom"> </i>
<i class = "fa fa-facebook-official custom"> </i>
<i class = "fa fa-facebook-square custom"> </i>
<i class = "fa fa-firefox personalizado"> </i>
<i class = "fa fa-flickr custom"> </i>
<i class = "fa fa-fonticons custom"> </i>
<i class = "fa fa-forumbee custom"> </i>
<i class = "fa fa-foursquare custom"> </i>
<i class = "fa fa-ge custom"> </i>
<i class = "fa fa-get-pocket custom"> </i>
<i class = "fa fa-gg custom"> </i>
<i class = "fa fa-gg-circle custom"> </i>
<i class = "fa fa-git custom"> </i>
<i class = "fa fa-git-square custom"> </i>
<i class = "fa fa-github custom"> </i>
<i class = "fa fa-github-alt personalizado"> </i>
<i class = "fa fa-github-square personalizado"> </i>
<i class = "fa fa-gratipay custom"> </i>
<i class = "fa fa-google custom"> </i>
<i class = "fa fa-google-plus custom"> </i>
<i class = "fa fa-google-plus-square custom"> </i>
<i class = "fa fa-youtube-play custom"> </i>
<i class = "fa fa-gratipay custom"> </i>
<i class = "fa fa-hacker-news custom"> </i>
<i class = "fa fa-houzz custom"> </i>
<i class = "fa fa-html5 personalizado"> </i>
<i class = "fa fa-instagram personalizado"> </i>
<i class = "fa fa-internet-explorer custom"> </i>
<i class = "fa fa-ioxhost custom"> </i>
<i class = "fa fa-joomla custom"> </i>
<i class = "fa fa-jsfiddle personalizado"> </i>
<i class = "fa fa-lastfm custom"> </i>
<i class = "fa fa-lastfm-square custom"> </i>
<i class = "fa fa-leanpub custom"> </i>
<i class = "fa fa-linkedin personalizado"> </i>
<i class = "fa fa-linkedin-square personalizado"> </i>
<i class = "fa fa-linux custom"> </i>
<i class = "fa fa-maxcdn custom"> </i>
<i class = "fa fa-meanpath custom"> </i>
<i class = "fa fa-medium custom"> </i>
<i class = "fa fa-odnoklassniki personalizado"> </i>
<i class = "fa fa-odnoklassniki-square personalizado"> </i>
<i class = "fa fa-opencart custom"> </i>
<i class = "fa fa-opera custom"> </i>
<i class = "fa fa-optin-monster custom"> </i>
<i class = "fa fa-openid custom"> </i>
<i class = "fa fa-pagelines custom"> </i>
<i class = "fa fa-youtube personalizado"> </i>
<i class = "fa fa-pied-piper custom"> </i>
<i class = "fa fa-pied-piper-alt custom"> </i>
<i class = "fa fa-pinterest custom"> </i>
<i class = "fa fa-pinterest-p custom"> </i>
<i class = "fa fa-pinterest-square custom"> </i>
<i class = "fa fa-qq custom"> </i>
<i class = "fa fa-ra custom"> </i>
<i class = "fa fa-rebel custom"> </i>
<i class = "fa fa-reddit custom"> </i>
<i class = "fa fa-renren custom"> </i>
<i class = "fa fa-amazon custom"> </i>
<i class = "fa fa-safari custom"> </i>
<i class = "fa fa-sellsy custom"> </i>
<i class = "fa fa-youtube-square custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square personalizado"> </i>
<i class = "fa fa-shirtsinbulk custom"> </i>
<i class = "fa fa-simplybuilt custom"> </i>
<i class = "fa fa-skyatlas custom"> </i>
<i class = "fa fa-skype personalizado"> </i>
<i class = "fa fa-slack custom"> </i>
<i class = "fa fa-yc-square personalizado"> </i>
<i class = "fa fa-soundcloud custom"> </i>
<i class = "fa fa-spotify personalizado"> </i>
<i class = "fa fa-stack-exchange custom"> </i>
<i class = "fa fa-stack-overflow custom"> </i>
<i class = "fa fa-steam custom"> </i>
<i class = "fa fa-steam-square custom"> </i>
<i class = "fa fa-stumbleupon custom"> </i>
<i class = "fa fa-stumbleupon-circle personalizado"> </i>
<i class = "fa fa-tencent-weibo custom"> </i>
<i class = "fa fa-trello custom"> </i>
<i class = "fa fa-tripadvisor personalizado"> </i>
<i class = "fa fa-tumblr personalizado"> </i>
<i class = "fa fa-tumblr-square personalizado"> </i>
<i class = "fa fa-yahoo custom"> </i>
<i class = "fa fa-twitter custom"> </i>
<i class = "fa fa-twitter-square custom"> </i>
<i class = "fa fa-viacoin personalizado"> </i>
<i class = "fa fa-vimeo custom"> </i>
<i class = "fa fa-vimeo-square personalizado"> </i>
<i class = "fa fa-vine custom"> </i>
<i class = "fa fa-vk custom"> </i>
<i class = "fa fa-wechat custom"> </i>
<i class = "fa fa-weibo custom"> </i>
<i class = "fa fa-weixin custom"> </i>
<i class = "fa fa-whatsapp custom"> </i>
<i class = "fa fa-wikipedia-w custom"> </i>
<i class = "fa fa-windows custom"> </i>
<i class = "fa fa-wordpress custom"> </i>
<i class = "fa-xing custom"> </i>
<i class = "fa-xing-square custom"> </i>
<i class = "fa fa-y-combinator custom"> </i>
<i class = "fa fa-y-combinator-square custom"> </i>
<i class = "fa fa-yc custom"> </i>

Este capítulo explica el uso de los iconos de Font Awesome Medical. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

La siguiente tabla muestra el uso y los resultados de los iconos de Font Awesome Medical. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Icono
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-h-square custom"> </i>
<i class = "fa fa-heart custom"> </i>
<i class = "fa fa-heart-o custom"> </i>
<i class = "fa fa-heartbeat custom"> </i>
<i class = "fa fa-hospital-o custom"> </i>
<i class = "fa fa-medkit custom"> </i>
<i class = "fa fa-plus-square custom"> </i>
<i class = "fa fa-estetoscopio personalizado"> </i>
<i class = "fa fa-user-md custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Google proporciona un conjunto de 750 íconos diseñados según las "pautas de diseño de materiales" y se conocen como Material Designiconos. Estos iconos son simples y son compatibles con todos los navegadores web modernos. Dado que estos iconos están basados en vectores, también son escalables. Para utilizar estos iconos, tenemos que cargar la fuente (biblioteca)material-icons.

Cargando la fuente (biblioteca)

Para cargar la biblioteca de iconos de material, copie y pegue la siguiente línea en la sección <head> de una página web.

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

Usando el icono

Los iconos de materiales de Google proporcionan una larga lista de iconos. Elija cualquiera de ellos y agregue el nombre de la clase de icono a cualquier elemento HTML dentro de la etiqueta <body>. En el siguiente ejemplo, hemos utilizado el icono llamadoaccessibility que pertenece a la categoría de acción.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el tamaño

Puede aumentar o disminuir el tamaño de un icono definiendo su tamaño en el CSS y usándolo junto con el nombre de la clase como se muestra a continuación. En el siguiente ejemplo, hemos declarado el tamaño como 6 cm.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Producirá la siguiente salida:

Definiendo el color

Puede utilizar CSS para definir el color de un icono. El siguiente ejemplo muestra cómo puede cambiar el color de un icono llamadoaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Producirá la siguiente salida:

Lista de categorías

La fuente Material Icons de Google proporciona 519 iconos en las siguientes categorías:

Iconos de acción
Iconos de alerta
Iconos AV
Iconos de comunicación
Iconos de contenido
Iconos de dispositivo
Iconos del editor
Iconos de archivo
Iconos de hardware
Iconos de imagen
Iconos de mapas
Iconos de navegación
Iconos de notificación
Iconos sociales
Alternar iconos

Para usar cualquiera de estos íconos, debe reemplazar el nombre de la clase en los programas dados en este capítulo con el nombre de la clase del ícono deseado. En los próximos capítulos de esta Unidad (Iconos de materiales), explicamos por categorías el uso y los resultados respectivos de varios Iconos de materiales.

Este capítulo explica el uso de los iconos de acción (material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los iconos de acción (material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> 3d_rotation </i>	3d_rotation
<i class = "material-icons custom"> accesibilidad </i>	accesibilidad
<i class = "material-icons custom"> balance_cuenta </i>	saldo de la cuenta
<i class = "material-icons custom"> account_balance_wallet </i>	account_balance_wallet
<i class = "material-icons custom"> account_box </i>	account_box
<i class = "material-icons custom"> account_circle </i>	account_circle
<i class = "material-icons custom"> add_shopping_cart </i>	add_shopping_cart
<i class = "material-icons custom"> alarma </i>	alarma
<i class = "material-icons custom"> alarm_add </i>	alarm_add
<i class = "material-icons custom"> alarm_off </i>	alarma apagada
<i class = "material-icons custom"> alarm_on </i>	alarm_on
<i class = "material-icons custom"> android </i>	androide
<i class = "material-icons custom"> anuncio </i>	anuncio
<i class = "material-icons custom"> relación_de_aspecto </i>	relación_de_aspecto
<i class = "material-icons custom"> evaluación </i>	evaluación
<i class = "material-icons custom"> asignación </i>	asignación
<i class = "material-icons custom"> asignación_ind </i>	asignación_ind
<i class = "material-icons custom"> asignación_late </i>	asignación_late
<i class = "material-icons custom"> devolución_asignación </i>	asignación_devolución
<i class = "material-icons custom"> asignación_ devuelta </i>	asignación_devuelta
<i class = "material-icons custom"> asignación_vuelta_en </i>	asignación_convertida_en
<i class = "material-icons custom"> autorenew </i>	auto renovación
<i class = "material-icons custom"> copia de seguridad </i>	apoyo
<i class = "material-icons custom"> libro </i>	libro
<i class = "material-icons custom"> marcador </i>	marcador
<i class = "material-icons custom"> bookmark_border </i>	bookmark_border
<i class = "material-icons custom"> bug_report </i>	informe de error
<i class = "material-icons custom"> compilar </i>	construir
<i class = "material-icons custom"> almacenado en caché </i>	en caché
<i class = "material-icons custom"> camera_enhance </i>	camera_enhance
<i class = "material-icons custom"> card_giftcard </i>	card_giftcard
<i class = "material-icons custom"> card_membership </i>	card_membership
<i class = "material-icons custom"> card_travel </i>	card_travel
<i class = "material-icons custom"> change_history </i>	cambia la historia
<i class = "material-icons personalizado"> check_circle </i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </i>	chrome_reader_mode
<i class = "material-icons custom"> clase </i>	clase
<i class = "material-icons personalizado"> código </i>	código
<i class = "material-icons custom"> tarjeta de crédito </i>	tarjeta de crédito
<i class = "material-icons custom"> panel </i>	tablero
<i class = "material-icons custom"> eliminar </i>	Eliminar
<i class = "material-icons custom"> descripción </i>	descripción
<i class = "material-icons custom"> dns </i>	dns
<i class = "material-icons custom"> hecho </i>	hecho
<i class = "material-icons custom"> done_all </i>	done_all
<i class = "material-icons custom"> expulsar </i>	expulsar
<i class = "material-icons custom"> evento </i>	evento
<i class = "material-icons custom"> event_seat </i>	event_seat
<i class = "material-icons custom"> exit_to_app </i>	exit_to_app
<i class = "material-icons custom"> explorar </i>	explorar
<i class = "material-icons custom"> extensión </i>	extensión
<i class = "material-icons custom"> rostro </i>	cara
<i class = "material-icons custom"> favorito </i>	favorito
<i class = "material-icons custom"> favorite_border </i>	favorite_border
<i class = "material-icons custom"> comentarios </i>	retroalimentación
<i class = "material-icons custom"> find_in_page </i>	encontrar en la página
<i class = "material-icons custom"> find_replace </i>	find_replace
<i class = "material-icons custom"> flight_land </i>	vuelo_land
<i class = "material-icons custom"> vuelo_despegue </i>	vuelo_despegue
<i class = "material-icons custom"> flip_to_back </i>	flip_to_back
<i class = "material-icons custom"> flip_to_front </i>	flip_to_front
<i class = "material-icons custom"> get_app </i>	Obtener aplicaciones
<i class = "material-icons personalizado"> gif </i>	gif
<i class = "material-icons custom"> grado </i>	grado
<i class = "material-icons custom"> trabajo en grupo </i>	trabajo en equipo
<i class = "material-icons custom"> ayuda </i>	ayuda
<i class = "material-icons custom"> help_outline </i>	help_outline
<i class = "material-icons custom"> resaltar_off </i>	highlight_off
<i class = "material-icons custom"> historial </i>	historia
<i class = "material-icons custom"> inicio </i>	casa
<i class = "material-icons custom"> hourglass_empty </i>	hourglass_empty
<i class = "material-icons custom"> hourglass_full </i>	hourglass_full
<i class = "material-icons personalizado"> http </i>	http
<i class = "material-icons personalizado"> https </i>	https
<i class = "material-icons custom"> información </i>	info
<i class = "material-icons personalizado"> info_outline </i>	info_outline
<i class = "material-icons custom"> entrada </i>	entrada
<i class = "material-icons custom"> colores_invertidos </i>	Colores invertidos
<i class = "material-icons custom"> etiqueta </i>	etiqueta
<i class = "material-icons custom"> label_outline </i>	label_outline
<i class = "material-icons custom"> idioma </i>	idioma
<i class = "material-icons custom"> lanzamiento </i>	lanzamiento
<i class = "material-icons custom"> lista </i>	lista
<i class = "material-icons custom"> candado </i>	bloquear
<i class = "material-icons custom"> lock_open </i>	lock_open
<i class = "material-icons personalizado"> lock_outline </i>	lock_outline
<i class = "material-icons custom"> lealtad </i>	lealtad
<i class = "material-icons custom"> markunread_mailbox </i>	markunread_mailbox
<i class = "material-icons custom"> note_add </i>	note_add
<i class = "material-icons custom"> offline_pin </i>	offline_pin
<i class = "material-icons custom"> open_in_browser </i>	abierta en el navegador
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	abrir con
<i class = "material-icons custom"> vista de página </i>	vista de pagina
<i class = "material-icons custom"> pago </i>	pago
<i class = "material-icons custom"> perm_camera_mic </i>	perm_camera_mic
<i class = "material-icons custom"> perm_contact_cale </i>	perm_contact_cale
<i class = "material-icons custom"> perm_data_settings </i>	perm_data_settings
<i class = "material-icons custom"> perm_device_information </i>	perm_device_information
<i class = "material-icons custom"> perm_identity </i>	perm_identity
<i class = "material-icons custom"> perm_media </i>	perm_media
<i class = "material-icons custom"> perm_phone_msg </i>	perm_phone_msg
<i class = "material-icons custom"> perm_scan_wifi </i>	perm_scan_wifi
<i class = "material-icons custom"> picture_in_picture </i>	imagen en imagen
<i class = "material-icons custom"> play_for_work </i>	jugar_para_trabajo
<i class = "material-icons custom"> polímero </i>	polímero
<i class = "material-icons custom"> power_settings_new </i>	power_settings_new
<i class = "material-icons custom"> imprimir </i>	impresión
<i class = "material-icons custom"> query_builder </i>	consultor de construcción
<i class = "material-icons custom"> question_answer </i>	pregunta respuesta
<i class = "material-icons custom"> recibo </i>	recibo
<i class = "material-icons custom"> canjear </i>	redimir
<i class = "material-icons custom"> reordenar </i>	reordenar
<i class = "material-icons custom"> report_problem </i>	Reportar problema
<i class = "material-icons custom"> restaurar </i>	restaurar
<i class = "material-icons custom"> habitación </i>	habitación
<i class = "material-icons custom"> horario </i>	calendario
<i class = "material-icons custom"> buscar </i>	buscar
<i class = "material-icons custom"> configuración </i>	ajustes
<i class = "material-icons custom"> settings_applications </i>	settings_applications
<i class = "material-icons custom"> settings_bluetooth </i>	settings_bluetooth
<i class = "material-icons custom"> settings_brightness </i>	settings_brightness
<i class = "material-icons custom"> celda_configuración </i>	celda_configuración
<i class = "material-icons custom"> settings_ethernet </i>	settings_ethernet
<i class = "material-icons custom"> settings_input_antenna </i>	settings_input_antenna
<i class = "material-icons custom"> settings_input_component </i>	settings_input_component
<i class = "material-icons custom"> settings_input_hdmi </i>	settings_input_hdmi
<i class = "material-icons custom"> settings_input_svideo </i>	settings_input_svideo
<i class = "material-icons custom"> settings_overscan </i>	settings_overscan
<i class = "material-icons custom"> settings_phone </i>	settings_phone
<i class = "material-icons custom"> settings_power </i>	settings_power
<i class = "material-icons custom"> settings_remote </i>	settings_remote
<i class = "material-icons custom"> settings_voice </i>	settings_voice
<i class = "material-icons custom"> comprar </i>	tienda
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> cesta_compra </i>	cesta de la compra
<i class = "material-icons custom"> shopping_cart </i>	carrito de compras
<i class = "material-icons custom"> oradores_notas </i>	orador_notes
<i class = "material-icons custom"> corrector ortográfico </i>	corrector ortográfico
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> estrellas </i>	estrellas
<i class = "material-icons custom"> tienda </i>	Tienda
<i class = "material-icons custom"> tema </i>	tema
<i class = "material-icons custom"> cuenta_supervisor </i>	cuenta_supervisor
<i class = "material-icons custom"> swap_horiz </i>	swap_horiz
<i class = "material-icons custom"> swap_vert </i>	swap_vert
<i class = "material-icons custom"> swap_vertical_circle </i>	swap_vertical_circle
<i class = "material-icons custom"> system_update_alt </i>	system_update_alt
pestaña <i class = "material-icons personalizado"> </i>	lengüeta
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> teatros </i>	teatros
<i class = "material-icons custom"> thumb_down </i>	pulgar hacia abajo
<i class = "material-icons custom"> thumb_up </i>	pulgar arriba
<i class = "material-icons custom"> thumbs_up_down </i>	thumbs_up_down
<i class = "material-icons custom"> toc </i>	toc
<i class = "material-icons custom"> hoy </i>	hoy
<i class = "material-icons custom"> peaje </i>	Peaje
<i class = "material-icons custom"> track_changes </i>	cambio de camino
<i class = "material-icons custom"> traducir </i>	traducir
<i class = "material-icons custom"> trending_down </i>	trending_down
<i class = "material-icons custom"> trending_flat </i>	trending_flat
<i class = "material-icons custom"> trending_up </i>	trending_up
<i class = "material-icons custom"> convertido en </i>	convertido en
<i class = "material-icons custom"> usuario_verificado </i>	usuario_verificado
<i class = "material-icons custom"> view_agenda </i>	view_agenda
<i class = "material-icons custom"> view_array </i>	view_array
<i class = "material-icons custom"> view_carousel </i>	view_carousel
<i class = "material-icons custom"> view_column </i>	view_column
<i class = "material-icons custom"> view_day </i>	view_day
<i class = "material-icons custom"> view_headline </i>	view_headline
<i class = "material-icons custom"> view_list </i>	ver lista
<i class = "material-icons custom"> view_module </i>	view_module
<i class = "material-icons custom"> view_quilt </i>	view_quilt
<i class = "material-icons custom"> view_stream </i>	view_stream
<i class = "material-icons custom"> view_week </i>	view_week
<i class = "material-icons custom"> visibilidad </i>	visibilidad
<i class = "material-icons custom"> visibilidad_off </i>	visibilidad_apagada
<i class = "material-icons custom"> trabajo </i>	trabajo
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons personalizado"> zoom_in </i>	acercarse
<i class = "material-icons custom"> zoom_out </i>	disminuir el zoom

Este capítulo explica el uso de los iconos de alerta (material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos de alerta (material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> add_alert </i>	add_alert
<i class = "material-icons custom"> error </i>	error
<i class = "material-icons custom"> error_outline </i>	error_outline
<i class = "material-icons custom"> advertencia </i>	advertencia

Este capítulo explica el uso de los íconos AV (Material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos AV (Material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> airplay </i>	salida en antena
<i class = "material-icons custom"> álbum </i>	álbum
<i class = "material-icons custom"> av_timer </i>	av_timer
<i class = "material-icons custom"> Closed_caption </i>	subtítulos
<i class = "material-icons custom"> ecualizador </i>	igualada
<i class = "material-icons custom"> explícito </i>	explícito
<i class = "material-icons custom"> fast_forward </i>	avance rápido
<i class = "material-icons custom"> fast_rewind </i>	fast_rewind
<i class = "material-icons custom"> forward_10 </i>	forward_10
<i class = "material-icons personalizado"> forward_30 </i>	forward_30
<i class = "material-icons personalizado"> forward_5 </i>	forward_5
<i class = "material-icons custom"> juegos </i>	juegos
<i class = "material-icons custom"> hd </i>	hd
<i class = "material-icons custom"> escuchar </i>	escuchando
<i class = "material-icons custom"> calidad_alta </i>	alta calidad
<i class = "material-icons custom"> library_add </i>	library_add
<i class = "material-icons custom"> library_books </i>	libros de la biblioteca
<i class = "material-icons custom"> library_music </i>	library_music
<i class = "material-icons custom"> bucle </i>	lazo
<i class = "material-icons personalizado"> micrófono </i>	micrófono
<i class = "material-icons custom"> mic_none </i>	mic_none
<i class = "material-icons custom"> mic_off </i>	mic_off
<i class = "material-icons custom"> película </i>	película
<i class = "material-icons custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icons custom"> new_releases </i>	nuevos lanzamientos
<i class = "material-icons custom"> no_interesado </i>	no interesado
<i class = "material-icons custom"> pausa </i>	pausa
<i class = "material-icons custom"> pause_circle_ llenado </i>	pause_circle_ fill
<i class = "material-icons custom"> play_arrow </i>	play_arrow
<i class = "material-icons custom"> play_circle_ fill </i>	play_circle_ fill
<i class = "material-icons custom"> play_circle_outline </i>	play_circle_outline
<i class = "material-icons custom"> playlist_add </i>	playlist_add
<i class = "material-icons custom"> cola </i>	cola
<i class = "material-icons custom"> queue_music </i>	queue_music
<i class = "material-icons custom"> radio </i>	radio
<i class = "material-icons custom"> Recent_actors </i>	actores_recientes
<i class = "material-icons custom"> repetir </i>	repetir
<i class = "material-icons custom"> repeat_one </i>	repetir_uno
<i class = "material-icons custom"> reproducir </i>	repetición
<i class = "material-icons custom"> airplay </i>	replay_10
<i class = "material-icons custom"> replay_30 </i>	replay_30
<i class = "material-icons custom"> replay_5 </i>	replay_5
<i class = "material-icons custom"> reproducción aleatoria </i>	barajar
<i class = "material-icons custom"> skip_next </i>	omitir próximo
<i class = "material-icons custom"> skip_previous </i>	skip_previous
<i class = "material-icons custom"> posponer </i>	dormitar
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> detener </i>	detener
<i class = "material-icons custom"> subtítulos </i>	subtítulos
<i class = "material-icons custom"> sonido_envolvente </i>	sonido envolvente
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> cámara de video </i>	cámara de video
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	bajar volumen
<i class = "material-icons custom"> volume_mute </i>	volume_mute
<i class = "material-icons custom"> volume_off </i>	volume_off
<i class = "material-icons custom"> volume_up </i>	sube el volumen
<i class = "material-icons custom"> web </i>	web

Este capítulo explica el uso de los iconos de comunicación (material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos de comunicación (material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> negocios </i>	negocio
<i class = "material-icons custom"> llamar </i>	llamada
<i class = "material-icons custom"> call_made </i>	call_made
<i class = "material-icons custom"> call_merge </i>	call_merge
<i class = "material-icons custom"> call_missed </i>	call_missed
<i class = "material-icons custom"> call_received </i>	call_received
<i class = "material-icons custom"> call_split </i>	call_split
<i class = "material-icons custom"> chat </i>	charla
<i class = "material-icons custom"> chat_bubble </i>	chat_bubble
<i class = "material-icons custom"> chat_bubble_outline </i>	chat_bubble_outline
<i class = "material-icons custom"> clear_all </i>	limpiar todo
<i class = "material-icons custom"> comentario </i>	comentario
<i class = "material-icons custom"> contact_phone </i>	teléfono de contacto
<i class = "material-icons custom"> contactos </i>	contactos
<i class = "material-icons custom"> dialer_sip </i>	dialer_sip
<i class = "material-icons personalizado"> teclado de marcación </i>	teclado
<i class = "material-icons custom"> foro </i>	foro
<i class = "material-icons custom"> import_export </i>	importación y exportación
<i class = "material-icons custom"> invert_colors_off </i>	invert_colors_off
<i class = "material-icons custom"> live_help </i>	ayuda en vivo
<i class = "material-icons custom"> location_off </i>	location_off
<i class = "material-icons custom"> location_on </i>	location_on
<i class = "material-icons custom"> mensaje </i>	mensaje
<i class = "material-icons custom"> no_sim </i>	sin SIM
<i class = "material-icons custom"> teléfono </i>	teléfono
<i class = "material-icons custom"> phonelink_erase </i>	phonelink_erase
<i class = "material-icons custom"> phonelink_lock </i>	phonelink_lock
<i class = "material-icons custom"> phonelink_ring </i>	phonelink_ring
<i class = "material-icons custom"> phonelink_setup </i>	phonelink_setup
<i class = "material-icons custom"> portable_wifi_off </i>	portable_wifi_off
<i class = "material-icons custom"> present_to_all </i>	present_to_all
<i class = "material-icons custom"> ring_volume </i>	ring_volume
<i class = "material-icons custom"> altavoz_teléfono </i>	altavoz_teléfono
<i class = "material-icons custom"> stay_current_landscape </i>	stay_current_landscape
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> stay_primary_landscape </i>	stay_primary_landscape
<i class = "material-icons custom"> stay_primary_portrait </i>	stay_primary_portrait
<i class = "material-icons custom"> swap_calls </i>	swap_calls
<i class = "material-icons custom"> textsms </i>	mensajes de texto
<i class = "material-icons custom"> correo de voz </i>	mensaje de voz
<i class = "material-icons custom"> clave_vpn </i>	clave_vpn
<i class = "material-icons custom"> correo electrónico </i>	correo electrónico
<i class = "material-icons custom"> call_end </i>	call_end

Este capítulo explica el uso de los íconos de contenido (material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos de contenido (material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> agregar </i>	añadir
<i class = "material-icons custom"> add_box </i>	add_box
<i class = "material-icons personalizado"> add_circle </i>	add_circle
<i class = "material-icons personalizado"> add_circle_outline </i>	add_circle_outline
<i class = "material-icons custom"> archivo </i>	archivo
<i class = "material-icons custom"> retroceso </i>	retroceso
<i class = "material-icons custom"> bloque </i>	bloquear
<i class = "material-icons custom"> borrar </i>	claro
<i class = "material-icons custom"> content_copy </i>	content_copy
<i class = "material-icons custom"> content_cut </i>	content_cut
<i class = "material-icons custom"> content_paste </i>	content_paste
<i class = "material-icons custom"> crear </i>	crear
<i class = "material-icons custom"> borradores </i>	borradores
<i class = "material-icons custom"> lista_filtros </i>	filter_list
<i class = "material-icons custom"> bandera </i>	bandera
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> adelante </i>	adelante
<i class = "material-icons custom"> gesto </i>	gesto
<i class = "material-icons custom"> bandeja de entrada </i>	bandeja de entrada
<i class = "material-icons custom"> enlace </i>	enlace
<i class = "material-icons custom"> correo </i>	correo
<i class = "material-icons custom"> markunread </i>	marcar como no leido
<i class = "material-icons custom"> rehacer </i>	rehacer
<i class = "material-icons custom"> eliminar </i>	eliminar
<i class = "material-icons custom"> remove_circle </i>	remove_circle
<i class = "material-icons custom"> remove_circle_outline </i>	remove_circle_outline
<i class = "material-icons custom"> responder </i>	respuesta
<i class = "material-icons custom"> responder_todos </i>	responder a todos
<i class = "material-icons custom"> informe </i>	reporte
<i class = "material-icons custom"> guardar </i>	salvar
<i class = "material-icons custom"> select_all </i>	seleccionar todo
<i class = "material-icons custom"> enviar </i>	enviar
<i class = "material-icons custom"> ordenar </i>	ordenar
<i class = "material-icons custom"> formato_texto </i>	formato de texto
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> deshacer </i>	deshacer

Este capítulo le proporciona el uso de los iconos de dispositivos (materiales) de Google. Asumir quecustom es el nombre de la clase CSS en la que definimos el tamaño y el color como se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos de dispositivos (materiales) de Google.

Uso	Resultado
<i class = "material-icons custom"> access_alarm </i>	access_alarm
<i class = "material-icons custom"> alarmas_de_acceso </i>	access_alarms
<i class = "material-icons custom"> tiempo de acceso </i>	tiempo de acceso
<i class = "material-icons custom"> add_alarm </i>	add_alarm
<i class = "material-icons custom"> modo_avión_activo </i>	modo_avión_activo
<i class = "material-icons custom"> modo_avión_inactivo </i>	planemode_inactive
<i class = "material-icons custom"> batería_alerta </i>	Alerta de batería
<i class = "material-icons custom"> batería_de_carga_completa </i>	batería_de_carga_completa
<i class = "material-icons custom"> battery_full </i>	Bateria llena
<i class = "material-icons custom"> battery_std </i>	battery_std
<i class = "material-icons custom"> battery_unknown </i>	battery_unknown
<i class = "material-icons custom"> bluetooth </i>	Bluetooth
<i class = "material-icons custom"> bluetooth_connected </i>	bluetooth_connected
<i class = "material-icons custom"> bluetooth_disabled </i>	bluetooth_disabled
<i class = "material-icons custom"> bluetooth_searching </i>	bluetooth_searching
<i class = "material-icons custom"> shine_auto </i>	brillo_auto
<i class = "material-icons custom"> brillo_alto </i>	brillo_alto
<i class = "material-icons custom"> brillo_bajo </i>	brillo_bajo
<i class = "material-icons custom"> brillo_medio </i>	brillo_medio
<i class = "material-icons custom"> data_usage </i>	Uso de datos
<i class = "material-icons custom"> modo_desarrollador </i>	modo desarrollador
<i class = "material-icons custom"> dispositivos </i>	dispositivos
<i class = "material-icons custom"> dvr </i>	dvr
<i class = "material-icons custom"> gps_fixed </i>	gps_fixed
<i class = "material-icons custom"> gps_not_fixed </i>	gps_not_fixed
<i class = "material-icons custom"> gps_off </i>	gps_off
<i class = "material-icons personalizado"> graphic_eq </i>	graphic_eq
<i class = "material-icons custom"> location_disabled </i>	location_disabled
<i class = "material-icons custom"> búsqueda_ubicación </i>	location_searching
<i class = "material-icons custom"> celda_red </i>	celda_red
<i class = "material-icons custom"> network_wifi </i>	network_wifi
<i class = "material-icons custom"> screen_lock_landscape </i>	screen_lock_landscape
<i class = "material-icons custom"> screen_lock_portrait </i>	screen_lock_portrait
<i class = "material-icons custom"> screen_lock_rotation </i>	screen_lock_rotation
<i class = "material-icons custom"> screen_rotation </i>	rotacion de pantalla
<i class = "material-icons custom"> sd_storage </i>	sd_storage
<i class = "material-icons custom"> settings_system_daydream </i>	settings_system_daydream
<i class = "material-icons custom"> signal_cellular_4_bar </i>	signal_cellular_4_bar
<i class = "material-icons custom"> wifi_tethering </i>	wifi_tethering
<i class = "material-icons custom"> signal_cellular_no_sim </i>	signal_cellular_no_sim
<i class = "material-icons custom"> signal_cellular_null </i>	signal_cellular_null
<i class = "material-icons custom"> signal_cellular_off </i>	signal_cellular_off
<i class = "material-icons custom"> signal_wifi_4_bar </i>	signal_wifi_4_bar
<i class = "material-icons custom"> signal_wifi_4_bar_lock </i>	signal_wifi_4_bar_lock
<i class = "material-icons custom"> signal_wifi_off </i>	signal_wifi_off
<i class = "material-icons custom"> almacenamiento </i>	almacenamiento
<i class = "material-icons custom"> usb </i>	USB
<i class = "material-icons custom"> fondo de pantalla </i>	fondo de pantalla
<i class = "material-icons custom"> widgets </i>	widgets
<i class = "material-icons custom"> wifi_lock </i>	wifi_lock
<i class = "material-icons custom"> signal_cellular_connected_no_internet_4_bar </i>	signal_cellular_connected_no_internet_4_bar

Este capítulo explica el uso de los íconos del Editor (Material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos del Editor (de materiales) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> adjuntar_archivo </i>	Adjuntar archivo
<i class = "material-icons custom"> attach_money </i>	attach_money
<i class = "material-icons custom"> border_all </i>	border_all
<i class = "material-icons custom"> border_bottom </i>	border_bottom
<i class = "material-icons custom"> border_clear </i>	border_clear
<i class = "material-icons custom"> border_color </i>	color del borde
<i class = "material-icons custom"> border_horizontal </i>	border_horizontal
<i class = "material-icons custom"> border_inner </i>	border_inner
<i class = "material-icons custom"> border_left </i>	border_left
<i class = "material-icons custom"> border_outer </i>	border_outer
<i class = "material-icons custom"> border_right </i>	border_right
<i class = "material-icons custom"> border_style </i>	estilo de borde
<i class = "material-icons custom"> border_top </i>	border_top
<i class = "material-icons custom"> border_vertical </i>	border_vertical
<i class = "material-icons custom"> format_align_center </i>	format_align_center
<i class = "material-icons custom"> format_align_justify </i>	format_align_justify
<i class = "material-icons custom"> format_align_left </i>	format_align_left
<i class = "material-icons custom"> format_align_right </i>	format_align_right
<i class = "material-icons personalizado"> format_bold </i>	format_bold
<i class = "material-icons personalizado"> format_clear </i>	format_clear
<i class = "material-icons custom"> format_color_fill </i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </i>	format_color_reset
<i class = "material-icons custom"> format_color_text </i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i>	format_indent_increase
<i class = "material-icons personalizado"> format_italic </i>	format_italic
<i class = "material-icons custom"> format_line_spacing </i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i>	format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i>	format_list_numbered
<i class = "material-icons custom"> format_paint </i>	format_paint
<i class = "material-icons custom"> format_quote </i>	format_quote
<i class = "material-icons custom"> formato_tamaño </i>	formato_tamaño
<i class = "material-icons custom"> format_strikethrough </i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i>	format_underline
<i class = "material-icons custom"> funciones </i>	funciones
<i class = "material-icons custom"> insert_chart </i>	insert_chart
<i class = "material-icons custom"> insert_comment </i>	Insertar comentario
<i class = "material-icons custom"> insert_drive_file </i>	insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i>	insert_emoticon
<i class = "material-icons custom"> insert_invitation </i>	insert_invitation
<i class = "material-icons personalizado"> insert_link </i>	Insertar el link
<i class = "material-icons custom"> insert_photo </i>	insertar_foto
<i class = "material-icons custom"> merge_type </i>	merge_type
<i class = "material-icons custom"> mode_comment </i>	mode_comment
<i class = "material-icons custom"> mode_edit </i>	mode_edit
<i class = "material-icons custom"> money_off </i>	money_off
<i class = "material-icons custom"> publicar </i>	publicar
<i class = "material-icons custom"> barra_espaciadora </i>	barra espaciadora
<i class = "material-icons custom"> tachado_s </i>	tachado_s
<i class = "material-icons custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icons personalizado"> vertical_align_center </i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i>	vertical_align_top
<i class = "material-icons custom"> wrap_text </i>	wrap_text

Este capítulo explica el uso de los iconos de archivo (Material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos del Archivo (Material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> adjunto </i>	adjunto archivo
<i class = "material-icons custom"> nube </i>	nube
<i class = "material-icons custom"> círculo_nube </i>	circulo_nube
<i class = "material-icons custom"> cloud_done </i>	cloud_done
<i class = "material-icons custom"> descarga_nube </i>	descarga_nube
<i class = "material-icons custom"> cloud_off </i>	cloud_off
<i class = "material-icons custom"> cloud_queue </i>	cloud_queue
<i class = "material-icons custom"> cloud_upload </i>	cloud_upload
<i class = "material-icons custom"> descarga_archivo </i>	descarga de archivos
<i class = "material-icons custom"> file_upload </i>	Subir archivo
<i class = "material-icons custom"> carpeta </i>	carpeta
<i class = "material-icons custom"> folder_open </i>	folder_open
<i class = "material-icons custom"> folder_shared </i>	folder_shared

Este capítulo explica el uso de los iconos de hardware (Material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los iconos de hardware (Material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> emitir </i>	emitir
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> computadora </i>	computadora
<i class = "material-icons custom"> desktop_mac </i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </i>	desktop_windows
<i class = "material-icons custom"> developer_board </i>	developer_board
<i class = "material-icons custom"> device_hub </i>	device_hub
<i class = "material-icons custom"> muelle </i>	muelle
<i class = "material-icons custom"> mando </i>	gamepad
<i class = "material-icons custom"> auriculares </i>	auriculares
<i class = "material-icons custom"> auricular_mic </i>	auricular_mic
<i class = "material-icons custom"> teclado </i>	teclado
<i class = "material-icons custom"> keyboard_arrow_down </i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </i>	keyboard_voice
<i class = "material-icons custom"> computadora portátil </i>	ordenador portátil
<i class = "material-icons custom"> laptop_chromebook </i>	laptop_chromebook
<i class = "material-icons custom"> laptop_mac </i>	laptop_mac
<i class = "material-icons custom"> laptop_windows </i>	laptop_windows
<i class = "material-icons custom"> memoria </i>	memoria
<i class = "material-icons custom"> mouse </i>	ratón
<i class = "material-icons custom"> phone_android </i>	phone_android
<i class = "material-icons custom"> teléfono_iphone </i>	phone_iphone
<i class = "material-icons custom"> enlace telefónico </i>	enlace telefónico
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	entrada de alimentación
<i class = "material-icons custom"> enrutador </i>	enrutador
<i class = "material-icons custom"> escáner </i>	escáner
<i class = "material-icons custom"> seguridad </i>	seguridad
<i class = "material-icons custom"> tarjeta_im </i>	tarjeta SIM
<i class = "material-icons custom"> teléfono inteligente </i>	smartphone
<i class = "material-icons custom"> altavoz </i>	altavoz
<i class = "material-icons custom"> grupo_de_parlantes </i>	altavoz_grupo
<i class = "material-icons custom"> tableta </i>	tableta
<i class = "material-icons custom"> tablet_android </i>	tablet_android
<i class = "material-icons custom"> tablet_mac </i>	tablet_mac
<i class = "material-icons custom"> juguetes </i>	juguetes
<i class = "material-icons custom"> tv </i>	televisión
<i class = "material-icons custom"> reloj </i>	reloj

Este capítulo explica el uso de los íconos de imágenes (de materiales) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos de imágenes (materiales) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons personalizado"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> ajustar </i>	ajustar
<i class = "material-icons custom"> asistente </i>	asistente
<i class = "material-icons custom"> asistente </i>	asistente
<i class = "material-icons custom"> pista de audio </i>	pista de audio
<i class = "material-icons custom"> blur_circular </i>	difuminar_circular
<i class = "material-icons personalizado"> blur_linear </i>	blur_linear
<i class = "material-icons custom"> blur_off </i>	blur_off
<i class = "material-icons custom"> difuminar_en </i>	desenfoque
<i class = "material-icons personalizado"> brillo_1 </i>	brillo_1
<i class = "material-icons personalizado"> brillo_2 </i>	brillo_2
<i class = "material-icons personalizado"> brillo_3 </i>	brillo_3
<i class = "material-icons personalizado"> brillo_4 </i>	brillo_4
<i class = "material-icons personalizado"> brillo_5 </i>	brillo_5
<i class = "material-icons personalizado"> brillo_6 </i>	brillo_6
<i class = "material-icons personalizado"> brillo_7 </i>	brillo_7
<i class = "material-icons custom"> imagen_ rota </i>	imagen_ rota
<i class = "material-icons custom"> pincel </i>	cepillo
<i class = "material-icons custom"> cámara </i>	cámara
<i class = "material-icons custom"> camera_alt </i>	camera_alt
<i class = "material-icons custom"> camera_front </i>	camera_front
<i class = "material-icons custom"> camera_rear </i>	camera_rear
<i class = "material-icons custom"> camera_roll </i>	rollo de la cámara
<i class = "material-icons custom"> center_focus_strong </i>	centro_enfoque_fuerte
<i class = "material-icons custom"> center_focus_weak </i>	center_focus_weak
<i class = "material-icons custom"> colecciones </i>	colecciones
<i class = "material-icons custom"> collections_bookmark </i>	collection_bookmark
<i class = "material-icons custom"> lentes de color </i>	color_lens
<i class = "material-icons custom"> colorear </i>	colorear
<i class = "material-icons custom"> comparar </i>	comparar
<i class = "material-icons custom"> punto_control </i>	punto de control
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> recortar </i>	cosecha
<i class = "material-icons custom"> crop_16_9 </i>	crop_16_9
<i class = "material-icons custom"> crop_3_2 </i>	crop_3_2
<i class = "material-icons custom"> crop_5_4 </i>	crop_5_4
<i class = "material-icons custom"> crop_7_5 </i>	crop_7_5
<i class = "material-icons custom"> crop_din </i>	crop_din
<i class = "material-icons custom"> crop_free </i>	crop_free
<i class = "material-icons custom"> crop_landscape </i>	crop_landscape
<i class = "material-icons custom"> crop_original </i>	crop_original
<i class = "material-icons custom"> crop_portrait </i>	crop_portrait
<i class = "material-icons custom"> crop_square </i>	crop_square
<i class = "material-icons custom"> eliminar la neblina </i>	desvanecer
<i class = "material-icons custom"> detalles </i>	detalles
<i class = "material-icons custom"> editar </i>	editar
<i class = "material-icons custom"> exposición </i>	exposición
<i class = "material-icons custom"> exposición_neg_1 </i>	exposición_neg_1
<i class = "material-icons custom"> exposición_plus_1 </i>	exposición_plus_1
<i class = "material-icons personalizado"> exposición_plus_2 </i>	exposición_plus_2
<i class = "material-icons custom"> exposición_zero </i>	exposición_ cero
<i class = "material-icons personalizado"> filtro </i>	filtrar
<i class = "material-icons personalizado"> filter_1 </i>	filter_1
<i class = "material-icons personalizado"> filter_2 </i>	filter_2
<i class = "material-icons personalizado"> filter_3 </i>	filter_3
<i class = "material-icons personalizado"> filter_4 </i>	filter_4
<i class = "material-icons personalizado"> filter_5 </i>	filter_5
<i class = "material-icons personalizado"> filter_6 </i>	filter_6
<i class = "material-icons personalizado"> filter_7 </i>	filter_7
<i class = "material-icons personalizado"> filter_8 </i>	filter_8
<i class = "material-icons personalizado"> filter_9 </i>	filter_9
<i class = "material-icons personalizado"> filter_9_plus </i>	filter_9_plus
<i class = "material-icons personalizado"> filter_b_and_w </i>	filter_b_and_w
<i class = "material-icons personalizado"> filter_center_focus </i>	filter_center_focus
<i class = "material-icons personalizado"> filter_drama </i>	filter_drama
<i class = "material-icons custom"> filter_frames </i>	filter_frames
<i class = "material-icons personalizado"> filter_hdr </i>	filter_hdr
<i class = "material-icons custom"> filter_none </i>	filter_none
<i class = "material-icons custom"> filter_tilt_shift </i>	filter_tilt_shift
<i class = "material-icons personalizado"> filter_vintage </i>	filter_vintage
<i class = "material-icons custom"> destello </i>	llamarada
<i class = "material-icons custom"> flash_auto </i>	flash_auto
<i class = "material-icons custom"> flash_off </i>	flash_off
<i class = "material-icons personalizado"> flash_on </i>	parpadeará en
<i class = "material-icons custom"> voltear </i>	dar la vuelta
<i class = "material-icons custom"> degradado </i>	degradado
<i class = "material-icons custom"> grano </i>	grano
<i class = "material-icons custom"> grid_off </i>	grid_off
<i class = "material-icons custom"> grid_on </i>	cuadrícula activa
<i class = "material-icons custom"> hdr_off </i>	hdr_off
<i class = "material-icons custom"> hdr_on </i>	hdr_on
<i class = "material-icons custom"> hdr_strong </i>	hdr_trong
<i class = "material-icons custom"> hdr_weak </i>	hdr_weak
<i class = "material-icons custom"> curación </i>	curación
<i class = "material-icons custom"> imagen </i>	imagen
<i class = "material-icons custom"> image_aspect_ratio </i>	image_aspect_ratio
<i class = "material-icons personalizado"> iso </i>	Yo asi
<i class = "material-icons custom"> paisaje </i>	paisaje
<i class = "material-icons custom"> fuga_add </i>	fuga_add
<i class = "material-icons custom"> fuga_remove </i>	escape_remove
<i class = "material-icons custom"> lente </i>	lente
<i class = "material-icons custom"> looks </i>	mira
<i class = "material-icons custom"> looks_3 </i>	looks_3
<i class = "material-icons custom"> looks_4 </i>	looks_4
<i class = "material-icons custom"> looks_5 </i>	looks_5
<i class = "material-icons custom"> looks_6 </i>	looks_6
<i class = "material-icons custom"> looks_one </i>	looks_one
<i class = "material-icons custom"> looks_two </i>	looks_two
<i class = "material-icons custom"> lupa </i>	lupa
<i class = "material-icons custom"> monocromas_fotos </i>	monocromas_fotos
<i class = "material-icons custom"> movie_creation </i>	movie_creation
<i class = "material-icons custom"> music_note </i>	nota musical
<i class = "material-icons custom"> naturaleza </i>	naturaleza
<i class = "material-icons custom"> personas_naturaleza </i>	nature_people
<i class = "material-icons custom"> wb_sunny </i>	wb_sunny
<i class = "material-icons custom"> navigate_next </i>	navigate_next
<i class = "material-icons custom"> navigate_before </i>	navegar_antes
<i class = "material-icons custom"> paleta </i>	paleta
<i class = "material-icons custom"> panorama </i>	panorama
<i class = "material-icons custom"> panorama_fish_eye </i>	panorama_fish_eye
<i class = "material-icons custom"> panorama_horizontal </i>	panorama_horizontal
<i class = "material-icons custom"> panorama_vertical </i>	panorama_vertical
<i class = "material-icons custom"> panorama_wide_angle </i>	panorama_wide_angle
<i class = "material-icons custom"> foto </i>	foto
<i class = "material-icons custom"> álbum_foto </i>	album de fotos
<i class = "material-icons custom"> photo_camera </i>	Cámara fotográfica
<i class = "material-icons custom"> biblioteca_foto </i>	librería fotográfica
<i class = "material-icons custom"> photo_size_select_actual </i>	photo_size_select_actual
<i class = "material-icons custom"> photo_size_select_large </i>	photo_size_select_large
<i class = "material-icons custom"> photo_size_select_small </i>	photo_size_select_small
<i class = "material-icons custom"> picture_as_pdf </i>	imagen_como_pdf
<i class = "material-icons custom"> retrato </i>	retrato
<i class = "material-icons custom"> remove_red_eye </i>	remove_red_eye
<i class = "material-icons custom"> rotate_90_degrees_ccw </i>	rotate_90_degrees_ccw
<i class = "material-icons custom"> rotate_left </i>	girar a la izquierda
<i class = "material-icons custom"> rotate_right </i>	Gira a la derecha
<i class = "material-icons custom"> presentación de diapositivas </i>	diapositivas
<i class = "material-icons custom"> enderezar </i>	enderezar
<i class = "material-icons custom"> estilo </i>	estilo
<i class = "material-icons custom"> switch_camera </i>	switch_camera
<i class = "material-icons custom"> switch_video </i>	switch_video
<i class = "material-icons custom"> tag_faces </i>	tag_faces
<i class = "material-icons custom"> textura </i>	textura
<i class = "material-icons custom"> timelapse </i>	lapso de tiempo
<i class = "material-icons custom"> temporizador </i>	Temporizador
<i class = "material-icons custom"> timer_10 </i>	timer_10
<i class = "material-icons custom"> timer_3 </i>	timer_3
<i class = "material-icons custom"> timer_off </i>	timer_off
<i class = "material-icons custom"> tonalidad </i>	tonalidad
<i class = "material-icons custom"> transformar </i>	transformar
<i class = "material-icons custom"> sintonizar </i>	melodía
<i class = "material-icons custom"> view_comfy </i>	view_comfy
<i class = "material-icons custom"> view_compact </i>	view_compact
<i class = "material-icons custom"> viñeta </i>	viñeta
<i class = "material-icons custom"> wb_auto </i>	wb_auto
<i class = "material-icons custom"> wb_cloudy </i>	wb_cloudy
<i class = "material-icons custom"> wb_incandescent </i>	wb_incandescente
<i class = "material-icons custom"> wb_iridescent </i>	wb_iridescent

Este capítulo explica el uso de los iconos de Mapas (de materiales) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos de Mapas (de materiales) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> estado </i>	estado aquí
<i class = "material-icons custom"> indicaciones </i>	direcciones
<i class = "material-icons custom"> Directions_bike </i>	Directions_bike
<i class = "material-icons custom"> Directions_boat </i>	direction_boat
<i class = "material-icons custom"> direcciones_bus </i>	direcciones_bus
<i class = "material-icons custom"> Directions_car </i>	Directions_car
<i class = "material-icons custom"> Directions_railway </i>	Directions_railway
<i class = "material-icons custom"> Directions_run </i>	Directions_run
<i class = "material-icons custom"> Directions_subway </i>	Directions_subway
<i class = "material-icons custom"> Directions_transit </i>	Directions_transit
<i class = "material-icons custom"> Directions_walk </i>	Directions_walk
<i class = "material-icons custom"> vuelo </i>	vuelo
<i class = "material-icons custom"> hotel </i>	hotel
<i class = "material-icons custom"> capas </i>	capas
<i class = "material-icons custom"> capas_clear </i>	capas_claro
<i class = "material-icons custom"> actividad_local </i>	actividad_local
<i class = "material-icons custom"> aeropuerto_local </i>	aeropuerto_local
<i class = "material-icons custom"> local_atm </i>	local_atm
<i class = "material-icons custom"> barra_local </i>	barra_local
<i class = "material-icons custom"> local_cafe </i>	local_cafe
<i class = "material-icons custom"> local_car_wash </i>	local_car_wash
<i class = "material-icons custom"> local_convenience_store </i>	local_convenience_store
<i class = "material-icons custom"> local_dining </i>	local_dining
<i class = "material-icons custom"> bebida_local </i>	bebida_local
<i class="material-icons custom">local_florist</i>	local_florist
<i class="material-icons custom">local_gas_station</i>	local_gas_station
<i class="material-icons custom">local_grocery_store</i>	local_grocery_store
<i class="material-icons custom">local_hospital</i>	local_hospital
<i class="material-icons custom">local_hotel</i>	local_hotel
<i class="material-icons custom">local_laundry_service</i>	local_laundry_service
<i class="material-icons custom">local_library</i>	local_library
<i class="material-icons custom">local_mall</i>	local_mall
<i class="material-icons custom">local_movies</i>	local_movies
<i class="material-icons custom">local_offer</i>	local_offer
<i class="material-icons custom">local_parking</i>	local_parking
<i class="material-icons custom">local_pharmacy</i>	local_pharmacy
<i class="material-icons custom">local_phone</i>	local_phone
<i class="material-icons custom">local_pizza</i>	local_pizza
<i class="material-icons custom">local_play</i>	local_play
<i class="material-icons custom">local_post_office</i>	local_post_office
<i class="material-icons custom">local_printshop</i>	local_printshop
<i class="material-icons custom">local_see</i>	local_see
<i class="material-icons custom">local_shipping</i>	local_shipping
<i class="material-icons custom">local_taxi</i>	local_taxi
<i class="material-icons custom">map</i>	map
<i class="material-icons custom">my_location</i>	my_location
<i class="material-icons custom">navigation</i>	navigation
<i class="material-icons custom">person_pin</i>	person_pin
<i class="material-icons custom">pin_drop</i>	pin_drop
<i class="material-icons custom">place</i>	place
<i class="material-icons custom">rate_review</i>	rate_review
<i class="material-icons custom">restaurant_menu</i>	restaurant_menu
<i class="material-icons custom">satellite</i>	satellite
<i class="material-icons custom">store_mall_directory</i>	store_mall_directory
<i class="material-icons custom">traffic</i>	traffic
<i class="material-icons custom">terrain</i>	terrain

This chapter explains the usage of Google's (Material) Navigation icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Navigation icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">apps</i>	apps
<i class="material-icons custom">arrow_back</i>	arrow_back
<i class="material-icons custom">arrow_drop_down</i>	arrow_drop_down
<i class="material-icons custom">arrow_drop_down_circle</i>	arrow_drop_down_circle
<i class="material-icons custom">arrow_drop_up</i>	arrow_drop_up
<i class="material-icons custom">arrow_forward</i>	arrow_forward
<i class="material-icons custom">cancel</i>	cancel
<i class="material-icons custom">check</i>	check
<i class="material-icons custom">chevron_left</i>	chevron_left
<i class="material-icons custom">chevron_right</i>	chevron_right
<i class="material-icons custom">close</i>	close
<i class="material-icons custom">expand_less</i>	expand_less
<i class="material-icons custom">expand_more</i>	expand_more
<i class="material-icons custom">fullscreen</i>	fullscreen
<i class="material-icons custom">fullscreen_exit</i>	fullscreen_exit
<i class="material-icons custom">menu</i>	menu
<i class="material-icons custom">more_horiz</i>	more_horiz
<i class="material-icons custom">more_vert</i>	more_vert
<i class="material-icons custom">refresh</i>	refresh

This chapter explains the usage of Google's (Material) Notification icons. Assume that custom is the CSS class name where we defined the size and color, as shown in the example given below.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

The following table contains the usage and results of Google's (Material) Notification icons. Replace the < body > tag of the above program with the code given in the table to get the respective outputs −

Usage	Result
<i class="material-icons custom">adb</i>	adb
<i class="material-icons custom">airline_seat_flat</i>	airline_seat_flat
<i class="material-icons custom">airline_seat_flat_angled</i>	airline_seat_flat_angled
<i class="material-icons custom">airline_seat_individual_suite</i>	airline_seat_individual_suite
<i class="material-icons custom">airline_seat_legroom_reduced</i>	airline_seat_legroom_reduced
<i class="material-icons custom">airline_seat_recline_extra</i>	airline_seat_recline_extra
<i class="material-icons custom">airline_seat_recline_normal</i>	airline_seat_recline_normal
<i class="material-icons custom">bluetooth_audio</i>	bluetooth_audio
<i class="material-icons custom">confirmation_number</i>	confirmation_number
<i class="material-icons custom">disc_full</i>	disc_full
<i class="material-icons custom">do_not_disturb</i>	do_not_disturb
<i class="material-icons custom">do_not_disturb_alt</i>	do_not_disturb_alt
<i class="material-icons custom">drive_eta</i>	drive_eta
<i class="material-icons custom">event_available</i>	event_available
<i class="material-icons custom">event_busy</i>	event_busy
<i class="material-icons custom">event_note</i>	event_note
<i class="material-icons custom">folder_special</i>	folder_special
<i class="material-icons custom">live_tv</i>	live_tv
<i class="material-icons custom">mms</i>	mms
<i class="material-icons custom">more</i>	more
<i class="material-icons custom">network_locked</i>	network_locked
<i class="material-icons custom">ondemand_video</i>	ondemand_video
<i class="material-icons custom">personal_video</i>	personal_video
<i class="material-icons custom">phone_bluetooth_speaker</i>	phone_bluetooth_speaker
<i class="material-icons custom">phone_forwarded</i>	phone_forwarded
<i class="material-icons custom">phone_in_talk</i>	phone_in_talk
<i class="material-icons custom">phone_locked</i>	phone_locked
<i class="material-icons custom">phone_missed</i>	phone_missed
<i class="material-icons custom">phone_paused</i>	phone_paused
<i class="material-icons custom">power</i>	power
<i class="material-icons custom">sd_card</i>	sd_card
<i class="material-icons custom">sim_card_alert</i>	sim_card_alert
<i class="material-icons custom">sms</i>	sms
<i class="material-icons custom">sms_failed</i>	sms_failed
<i class="material-icons custom">sync</i>	sync
<i class="material-icons custom">sync_disabled</i>	sync_disabled
<i class="material-icons custom">sync_problem</i>	sync_problem
<i class="material-icons custom">system_update</i>	system_update
<i class="material-icons custom">tap_and_play</i>	tap_and_play
<i class="material-icons custom">time_to_leave</i>	time_to_leave
<i class="material-icons custom">vibration</i>	vibration
<i class="material-icons custom">voice_chat</i>	voice_chat
<i class="material-icons custom">vpn_lock</i>	vpn_lock
<i class="material-icons custom">wc</i>	wc
<i class="material-icons custom">wifi</i>	wifi

Este capítulo explica el uso de los íconos sociales (materiales) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos sociales (materiales) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> pastel </i>	pastel
<i class = "material-icons custom"> dominio </i>	dominio
<i class = "material-icons custom"> grupo </i>	grupo
<i class = "material-icons custom"> group_add </i>	group_add
<i class = "material-icons custom"> location_city </i>	location_city
<i class = "material-icons custom"> estado de ánimo </i>	estado animico
<i class = "material-icons custom"> mood_bad </i>	mal humor
<i class = "material-icons custom"> notificaciones </i>	notificaciones
<i class = "material-icons custom"> notificaciones_activas </i>	notificaciones_activas
<i class = "material-icons custom"> notificaciones_none </i>	notificaciones_none
<i class = "material-icons custom"> notificaciones_off </i>	notificaciones_off
<i class = "material-icons custom"> notificaciones_pausadas </i>	notificaciones_pausado
<i class = "material-icons custom"> páginas </i>	paginas
<i class = "material-icons custom"> modo_fiesta </i>	modo fiesta
<i class = "material-icons custom"> personas </i>	personas
<i class = "material-icons custom"> esquema_personas </i>	people_outline
<i class = "material-icons custom"> persona </i>	persona
<i class = "material-icons custom"> person_add </i>	person_add
<i class = "material-icons custom"> person_outline </i>	person_outline
<i class = "material-icons custom"> plus_one </i>	mas uno
<i class = "material-icons custom"> encuesta </i>	encuesta
<i class = "material-icons custom"> público </i>	público
<i class = "material-icons custom"> escuela </i>	colegio
<i class = "material-icons custom"> compartir </i>	compartir
<i class = "material-icons custom"> whatshot </i>	Que calor

Este capítulo explica el uso de los iconos de alternancia (Material) de Google. Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel =  "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de los íconos Alternar (Material) de Google. Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "material-icons custom"> casilla de verificación </i>	caja
<i class = "material-icons custom"> check_box_outline_blank </i>	check_box_outline_blank
<i class = "material-icons custom"> indeterminate_check_box </i>	indeterminate_check_box
<i class = "material-icons custom"> radio_button_checked </i>	radio_button_checked
<i class = "material-icons custom"> radio_button_unchecked </i>	radio_button_unchecked
<i class = "material-icons custom"> estrella </i>	estrella
<i class = "material-icons custom"> star_border </i>	star_border
<i class = "material-icons custom"> star_half </i>	star_half

Esta es una biblioteca de iconos monocromáticos disponibles en formatos de imágenes rasterizadas, formatos de imágenes vectoriales y como fuentes. Proporciona más de 250 glifos en formato de fuente. Puede utilizar estas fuentes en sus proyectos web. Estos glifos no son gratuitos, sin embargo, si no tiene que gastar nada en caso de que los esté usando en proyectos basados en Bootstrap.

Cargando la fuente (biblioteca)

Para cargar la biblioteca Bootstrap Glyphicons, copie y pegue la siguiente línea en la sección <head> de la página web.

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

Usando el icono

Bootstrap Glyphicons proporciona una serie de iconos. Elija uno de ellos y agregue el nombre de la clase de icono a cualquier elemento HTML dentro de la etiqueta <body>. En el siguiente ejemplo, hemos utilizado el icono del árbol y su nombre de clase estree-deciduous.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous"> </i>
   </body>
</html>

Producirá la siguiente salida:

Definiendo el tamaño

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Producirá la siguiente salida:

Definiendo el color

Puede definir el color de un icono utilizando CSS. El siguiente ejemplo muestra cómo cambiar el color del icono del árbol.

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

Producirá la siguiente salida:

Este capítulo explica el uso de Bootstrap Glyphicons (componentes). Asumir quecustom es el nombre de la clase CSS donde definimos el tamaño y el color, como se muestra en el ejemplo que se muestra a continuación.

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

La siguiente tabla contiene el uso y los resultados de Bootstrap Glyphicons (Componentes). Reemplace la etiqueta <body> del programa anterior con el código dado en la tabla para obtener las salidas respectivas -

Uso	Resultado
<i class = "glyphicon glyphicon-asterisk custom"> </i>
<i class = "glyphicon glyphicon-plus personalizado"> </i>
<i class = "glyphicon glyphicon-euro custom"> </i>
<i class = "glyphicon glyphicon-minus custom"> </i>
<i class = "glyphicon glyphicon-cloud custom"> </i>
<i class = "glyphicon glyphicon-sobre personalizado"> </i>
<i class = "glyphicon glyphicon-pencil personalizado"> </i>
<i class = "glyphicon glyphicon-glass custom"> </i>
<i class = "glyphicon glyphicon-music personalizado"> </i>
<i class = "glyphicon glyphicon-search personalizado"> </i>
<i class = "glyphicon glyphicon-heart custom"> </i>
<i class = "glyphicon glyphicon-star personalizado"> </i>
<i class = "glyphicon glyphicon-star-empty custom"> </i>
<i class = "glyphicon glyphicon-user custom"> </i>
<i class = "glyphicon glyphicon-film personalizado"> </i>
<i class = "glyphicon glyphicon-th-large personalizado"> </i>
<i class = "glyphicon glyphicon-th personalizado"> </i>
<i class = "glyphicon glyphicon-th-list personalizado"> </i>
<i class = "glyphicon glyphicon-ok personalizado"> </i>
<i class = "glyphicon glyphicon-remove custom"> </i>
<i class = "glyphicon glyphicon-zoom-in personalizado"> </i>
<i class = "glyphicon glyphicon-zoom-out custom"> </i>
<i class = "glyphicon glyphicon-off custom"> </i>
<i class = "glyphicon glyphicon-signal custom"> </i>
<i class = "glyphicon glyphicon-cog personalizado"> </i>
<i class = "glyphicon glyphicon-trash custom"> </i>
<i class = "glyphicon glyphicon-home custom"> </i>
<i class = "glyphicon glyphicon-file personalizado"> </i>
<i class = "glyphicon glyphicon-time custom"> </i>
<i class = "glyphicon glyphicon-road custom"> </i>
<i class = "glyphicon glyphicon-download-alt custom"> </i>
<i class = "glyphicon glyphicon-download custom"> </i>
<i class = "glyphicon glyphicon-upload custom"> </i>
<i class = "glyphicon glyphicon-inbox custom"> </i>
<i class = "glyphicon glyphicon-play-circle custom"> </i>
<i class = "glyphicon glyphicon-repeat custom"> </i>
<i class = "glyphicon glyphicon-refresh custom"> </i>
<i class = "glyphicon glyphicon-list-alt personalizado"> </i>
<i class = "glyphicon glyphicon-lock personalizado"> </i>
<i class = "glyphicon glyphicon-flag personalizado"> </i>
<i class = "glyphicon glyphicon-auriculares personalizados"> </i>
<i class = "glyphicon glyphicon-volume-off custom"> </i>
<i class = "glyphicon glyphicon-volume-down custom"> </i>
<i class = "glyphicon glyphicon-volume-up custom"> </i>
<i class = "glyphicon glyphicon-qrcode personalizado"> </i>
<i class = "glyphicon glyphicon-barcode custom"> </i>
<i class = "glyphicon glyphicon-tag personalizado"> </i>
<i class = "glyphicon glyphicon-tags custom"> </i>
<i class = "glyphicon glyphicon-book personalizado"> </i>
<i class = "glyphicon glyphicon-bookmark custom"> </i>
<i class = "glyphicon glyphicon-print custom"> </i>
<i class = "glyphicon glyphicon-camera custom"> </i>
<i class = "glyphicon glyphicon-font custom"> </i>
<i class = "glyphicon glyphicon-bold custom"> </i>
<i class = "glyphicon glyphicon-italic custom"> </i>
<i class = "glyphicon glyphicon-text-height custom"> </i>
<i class = "glyphicon glyphicon-text-width custom"> </i>
<i class = "glyphicon glyphicon-align-left personalizado"> </i>
<i class = "glyphicon glyphicon-align-center personalizado"> </i>
<i class = "glyphicon glyphicon-align-right personalizado"> </i>
<i class = "glyphicon glyphicon-align-justify personalizado"> </i>
<i class = "glyphicon glyphicon-list personalizado"> </i>
<i class = "glyphicon glyphicon-indent-left custom"> </i>
<i class = "glyphicon glyphicon-indent-right custom"> </i>
<i class = "glyphicon glyphicon-facetime-video custom"> </i>
<i class = "glyphicon glyphicon-picture custom"> </i>
<i class = "glyphicon glyphicon-map-marker custom"> </i>
<i class = "glyphicon glyphicon-Adjust custom"> </i>
<i class = "glyphicon glyphicon-tint personalizado"> </i>
<i class = "glyphicon glyphicon-edit custom"> </i>
<i class = "glyphicon glyphicon-share custom"> </i>
<i class = "glyphicon glyphicon-check custom"> </i>
<i class = "glyphicon glyphicon-move custom"> </i>
<i class = "glyphicon glyphicon-step-backward custom"> </i>
<i class = "glyphicon glyphicon-fast-backward custom"> </i>
<i class = "glyphicon glyphicon-backward custom"> </i>
<i class = "glyphicon glyphicon-play personalizado"> </i>
<i class = "glyphicon glyphicon-pause personalizado"> </i>
<i class = "glyphicon glyphicon-stop custom"> </i>
<i class = "glyphicon glyphicon-forward personalizado"> </i>
<i class = "glyphicon glyphicon-fast-forward custom"> </i>
<i class = "glyphicon glyphicon-step-forward custom"> </i>
<i class = "glyphicon glyphicon-eject custom"> </i>
<i class = "glyphicon glyphicon-chevron-left personalizado"> </i>
<i class = "glyphicon glyphicon-chevron-right custom"> </i>
<i class = "glyphicon glyphicon-plus-sign custom"> </i>
<i class = "glyphicon glyphicon-minus-sign custom"> </i>
<i class = "glyphicon glyphicon-remove-sign custom"> </i>
<i class = "glyphicon glyphicon-ok-sign personalizado"> </i>
<i class = "glyphicon glyphicon-question-sign custom"> </i>
<i class = "glyphicon glyphicon-info-sign custom"> </i>
<i class = "glyphicon glyphicon-screenshot custom"> </i>
<i class = "glyphicon glyphicon-remove-circle custom"> </i>
<i class = "glyphicon glyphicon-ok-circle personalizado"> </i>
<i class = "glyphicon glyphicon-ban-circle personalizado"> </i>
<i class = "glyphicon glyphicon-arrow-left personalizado"> </i>
<i class = "glyphicon glyphicon-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-share-alt custom"> </i>
<i class = "glyphicon glyphicon-resize-full custom"> </i>
<i class = "glyphicon glyphicon-resize-small custom"> </i>
<i class = "glyphicon glyphicon-exclamation-sign custom"> </i>
<i class = "glyphicon glyphicon-gift custom"> </i>
<i class = "glyphicon glyphicon-leaf custom"> </i>
<i class = "glyphicon glyphicon-fire personalizado"> </i>
<i class = "glyphicon glyphicon-eye-open custom"> </i>
<i class = "glyphicon glyphicon-eye-close custom"> </i>
<i class = "glyphicon glyphicon-warning-sign custom"> </i>
<i class = "glyphicon glyphicon-plane personalizado"> </i>
<i class = "glyphicon glyphicon-calendar personalizado"> </i>
<i class = "glyphicon glyphicon-random custom"> </i>
<i class = "glyphicon glyphicon-comment personalizado"> </i>
<i class = "glyphicon glyphicon-magnet personalizado"> </i>
<i class = "glyphicon glyphicon-chevron-up custom"> </i>
<i class = "glyphicon glyphicon-chevron-down custom"> </i>
<i class = "glyphicon glyphicon-retweet personalizado"> </i>
<i class = "glyphicon glyphicon-shopping-cart custom"> </i>
<i class = "glyphicon glyphicon-folder-close custom"> </i>
<i class = "glyphicon glyphicon-folder-open custom"> </i>
<i class = "glyphicon glyphicon-resize-vertical custom"> </i>
<i class = "glyphicon glyphicon-resize-horizontal custom"> </i>
<i class = "glyphicon glyphicon-hdd personalizado"> </i>
<i class = "glyphicon glyphicon-bullhorn custom"> </i>
<i class = "glyphicon glyphicon-bell personalizado"> </i>
<i class = "glyphicon glyphicon-certificate personalizado"> </i>
<i class = "glyphicon glyphicon-thumbs-up custom"> </i>
<i class = "glyphicon glyphicon-thumbs-down custom"> </i>
<i class = "glyphicon glyphicon-hand-right custom"> </i>
<i class = "glyphicon glyphicon-hand-left personalizado"> </i>
<i class = "glyphicon glyphicon-hand-up custom"> </i>
<i class = "glyphicon glyphicon-hand-down custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-right custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-left personalizado"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-globe personalizado"> </i>
<i class = "glyphicon glyphicon-wrench personalizado"> </i>
<i class = "glyphicon glyphicon-tasks custom"> </i>
<i class = "glyphicon glyphicon-filter personalizado"> </i>
<i class = "glyphicon glyphicon-maletín personalizado"> </i>
<i class = "glyphicon glyphicon-fullscreen custom"> </i>
<i class = "glyphicon glyphicon-dashboard custom"> </i>
<i class = "glyphicon glyphicon-paperclip personalizado"> </i>
<i class = "glyphicon glyphicon-heart-empty custom"> </i>
<i class = "glyphicon glyphicon-link personalizado"> </i>
<i class = "glyphicon glyphicon-phone personalizado"> </i>
<i class = "glyphicon glyphicon-pushpin custom"> </i>
<i class = "glyphicon glyphicon-usd personalizado"> </i>
<i class = "glyphicon glyphicon-gbp personalizado"> </i>
<i class = "glyphicon glyphicon-sort personalizado"> </i>
<i class = "glyphicon glyphicon-sort-by-alphabet custom"> </i>
<i class = "glyphicon glyphicon-sort-by-alphabet-alt custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order custom"> </i>
<i class = "glyphicon glyphicon-sort-by-order-alt custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attribute custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attribute-alt custom"> </i>
<i class = "glyphicon glyphicon-unchecked custom"> </i>
<i class = "glyphicon glyphicon-expand custom"> </i>
<i class = "glyphicon glyphicon-collapse-down custom"> </i>
<i class = "glyphicon glyphicon-collapse-up custom"> </i>
<i class = "glyphicon glyphicon-log-in custom"> </i>
<i class = "glyphicon glyphicon-flash custom"> </i>
<i class = "glyphicon glyphicon-log-out custom"> </i>
<i class = "glyphicon glyphicon-new-window custom"> </i>
<i class = "glyphicon glyphicon-record personalizado"> </i>
<i class = "glyphicon glyphicon-save custom"> </i>
<i class = "glyphicon glyphicon-open custom"> </i>
<i class = "glyphicon glyphicon-Saved personalizado"> </i>
<i class = "glyphicon glyphicon-import custom"> </i>
<i class = "glyphicon glyphicon-export custom"> </i>
<i class = "glyphicon glyphicon-send custom"> </i>
<i class = "glyphicon glyphicon-floppy-disk custom"> </i>
<i class = "glyphicon glyphicon-floppy-Saved custom"> </i>
<i class = "glyphicon glyphicon-floppy-remove custom"> </i>
<i class = "glyphicon glyphicon-floppy-save custom"> </i>
<i class = "glyphicon glyphicon-floppy-open custom"> </i>
<i class = "glyphicon glyphicon-credit-card custom"> </i>
<i class = "glyphicon glyphicon-transfer custom"> </i>
<i class = "glyphicon glyphicon-cutlery custom"> </i>
<i class = "glyphicon glyphicon-header custom"> </i>
<i class = "glyphicon glyphicon-compressed personalizado"> </i>
<i class = "glyphicon glyphicon-earphone custom"> </i>
<i class = "glyphicon glyphicon-phone personalizado"> </i>
<i class = "glyphicon glyphicon-tower personalizado"> </i>
<i class = "glyphicon glyphicon-stats personalizado"> </i>
<i class = "glyphicon glyphicon-sd-video custom"> </i>
<i class = "glyphicon glyphicon-hd-video custom"> </i>
<i class = "glyphicon glyphicon-subtitles personalizado"> </i>
<i class = "glyphicon glyphicon-sound-stereo custom"> </i>
<i class = "glyphicon glyphicon-sound-dolby custom"> </i>
<i class = "glyphicon glyphicon-sound-5-1 personalizado"> </i>
<i class = "glyphicon glyphicon-sound-6-1 personalizado"> </i>
<i class = "glyphicon glyphicon-sound-7-1 personalizado"> </i>
<i class = "glyphicon glyphicon-copyright-mark custom"> </i>
<i class = "glyphicon glyphicon-registration-mark custom"> </i>
<i class = "glyphicon glyphicon-cloud-download custom"> </i>
<i class = "glyphicon glyphicon-cloud-upload custom"> </i>
<i class = "glyphicon glyphicon-tree-conifer custom"> </i>
<i class = "glyphicon glyphicon-tree-deciduous custom"> </i>