Icônes Web - Guide rapide

Une icône est un symbole utilisé pour représenter une action ou une capacité spécifique sur une page Web. Les icônes sont utilisées dans les documents ainsi que dans les applications et peuvent être sélectionnables ou non. Par exemple, les images que nous voyons sur les boutons d'une application sont toutes des icônes et ces boutons sont sélectionnables. De même, lorsque nous utilisons une icône comme logo d'entreprise, elle n'est normalement pas sélectionnable.

Dans l'environnement Windows, si nous coupons le volume du système, il sera représenté à l'aide d'une icône, comme indiqué ci-dessous.

En utilisant les icônes Web, nous pouvons représenter une page de chargement, une option désactivée, un lien, une redirection, etc. Ces icônes peuvent être retournées, pivotées, redimensionnées, encadrées, inversées et colorées.

Polices d'icônes

Les polices d'icônes contiennent des symboles et des glyphes. Une fois que vous avez chargé une police souhaitée, vous pouvez utiliser l'une des icônes fournies par cette police en utilisant le nom de classe de l'icône. Nous pouvons également appliquer différentes couleurs aux icônes et les redimensionner à l'aide des propriétés CSS. Il existe plusieurs bibliothèques d'icônes (polices) qui fournissent des icônes. Ce tutoriel se concentre sur trois polices principales, à savoir -

Police géniale
Glyphicons Bootstrap
Icônes matérielles de Google

Police géniale

Cette police fournit 519 icônes vectorielles évolutives gratuites. Cette bibliothèque est entièrement gratuite, à la fois pour un usage personnel et commercial. Ces icônes peuvent être personnalisées facilement. À l'origine, ils ont été développés pour Bootstrap.

Glyphicons Bootstrap

Il s'agit d'une bibliothèque d'icônes monochromatiques disponibles dans des formats d'image raster, des formats d'image vectorielle et sous forme de polices. Il fournit plus de 250 glyphes au format de police. Vous pouvez utiliser ces polices dans vos projets Web. Ces icônes ne sont pas gratuites, mais vous pouvez les utiliser dans des projets basés sur Bootstrap sans avoir à les acheter.

Icônes matérielles de Google

Google propose environ 750 icônes conçues conformément aux "Consignes relatives à la conception des matériaux". Ces icônes sont appelées Material DesignIcônes. Ces icônes sont simples et prennent en charge tous les navigateurs Web modernes. Étant donné que ces icônes sont basées sur des vecteurs, elles sont également évolutives. Pour utiliser ces icônes, nous devons charger la police (bibliothèque)material-icons.

La bibliothèque d'icônes Font Awesome fournit 519 icônes vectorielles évolutives gratuites. Cette bibliothèque est entièrement gratuite pour un usage personnel et commercial. Conçues à l'origine pour Bootstrap, ces icônes peuvent être personnalisées facilement.

Chargement de la bibliothèque de polices

Pour charger la bibliothèque Font Awesome, copiez et collez la ligne suivante dans la section <head> de la page Web.

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

Utilisation de l'icône

Font Awesome fournit plusieurs icônes. Choisissez l'un d'entre eux et ajoutez le nom de la classe d'icônes à n'importe quel élément HTML de la balise <body>. Dans l'exemple suivant, nous avons utilisé l'icône de la monnaie indienne.

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

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'une icône en définissant sa taille à l'aide de CSS et en l'utilisant avec le nom de la classe, comme indiqué ci-dessous. Dans l'exemple donné, nous avons déclaré la taille 6 em.

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

Il produira la sortie suivante -

Définition de la couleur

Tout comme la taille, vous pouvez définir la couleur des icônes en utilisant CSS. L'exemple suivant montre comment modifier la couleur de l'icône de la devise indienne.

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

Liste des catégories

Font Awesome fournit 519 icônes dans les catégories suivantes -

Icônes d'application Web
Icônes de la main
Icônes de transport
Icônes de genre
Icônes de type de fichier
Icônes de spinner
Icônes de contrôle de formulaire
Icônes de paiement
Icônes graphiques
Icônes de devises
Icônes de l'éditeur de texte
Icônes directionnelles
Icônes du lecteur vidéo
Icônes de marque

Pour utiliser l'une de ces icônes, vous devez remplacer le nom de classe dans les programmes donnés dans ce chapitre par le nom de classe de l'icône souhaitée. Dans les prochains chapitres de cette unité (Font Awesome), nous avons expliqué par catégorie l'utilisation et les sorties respectives de diverses icônes Font Awesome.

Ce chapitre explique l'utilisation des icônes de l'application Web Font Awesome. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes d'application Web Font Awesome. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-Adjust custom"> </i>
<i class = "fa fa-anchor custom"> </i>
<i class = "fa fa-archive custom"> </i>
<i class = "fa fa-area-chart custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-h custom"> </i>
<i class = "fa fa-arrows-v custom"> </i>
<i class = "fa fa-asterisk custom"> </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-barcode custom"> </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-bike 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-quarts 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-briefcase custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-caret-square-o-down custom"> </i>
<i class = "fa fa-caret-square-o-left custom"> </i>
<i class = "fa fa-caret-square-o-right custom"> </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 custom"> </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 custom"> </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-enveloppe custom"> </i>
<i class = "fa fa-enveloppe-o custom"> </i>
<i class = "fa fa-wrap-square custom"> </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-pipette custom"> </i>
<i class = "fa fa-fax custom"> </i>
<i class = "fa fa-feed custom"> </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 custom"> </i>
<i class = "fa fa-fire custom"> </i>
<i class = "fa fa-fire-extinguisher custom"> </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 custom"> </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-casque personnalisé"> </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 custom"> </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 custom"> </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-microphone custom"> </i>
<i class = "fa fa-microphone-slash custom"> </i>
<i class = "fa fa-minus custom"> </i>
<i class = "fa fa-minus-circle custom"> </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-Motorcycle custom"> </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 custom"> </i>
<i class = "fa fa-quote-right custom"> </i>
<i class = "fa fa-random custom"> </i>
<i class = "fa fa-recycle custom"> </i>
<i class = "fa fa-refresh custom"> </i>
<i class = "fa fa-registered custom"> </i>
<i class = "fa fa-remove custom"> </i>
<i class = "fa fa-reorder custom"> </i>
<i class = "fa fa-reply custom"> </i>
<i class = "fa fa-reply-all custom"> </i>
<i class = "fa fa-retweet custom"> </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 custom"> </i>
<i class = "fa fa-share custom"> </i>
<i class = "fa fa-share-alt custom"> </i>
<i class = "fa fa-share-alt-square custom"> </i>
<i class = "fa fa-share-alt-o custom"> </i>
<i class = "fa fa-shield custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-sort-numeric-desc custom"> </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 custom"> </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-marque custom"> </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-parapluie personnalisé"> </i>
<i class = "fa fa-university custom"> </i>
<i class = "fa fa-unlock custom"> </i>
<i class = "fa fa-unlock-alt custom"> </i>
<i class = "fa fa-unsorted custom"> </i>
<i class = "fa fa-upload custom"> </i>
<i class = "fa fa-user custom"> </i>
<i class = "fa fa-user-plus custom"> </i>
<i class = "fa fa-user-secret custom"> </i>
<i class = "fa fa-user-times custom"> </i>

Ce chapitre explique l'utilisation des icônes Font Awesome Hand. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant montre l'utilisation et les résultats des icônes Font Awesome Hand. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<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>

Ce chapitre explique l'utilisation des icônes Font Awesome Transportation. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes Font Awesome Transportation. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-ambulance custom"> </i>
<i class = "fa fa-automobile custom"> </i>
<i class = "fa fa-bike 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-Motorcycle custom"> </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 custom"> </i>
<i class = "fa fa-truck custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Ce chapitre explique l'utilisation des icônes Font Awesome Gender. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes Font Awesome Gender. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<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 custom"> </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>

Ce chapitre explique l'utilisation des icônes de type de fichier Font Awesome. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes de type de fichier Font Awesome. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-file 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-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>

Ce chapitre explique l'utilisation des icônes Font Awesome Spinner. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant montre l'utilisation et les résultats des icônes Font Awesome Spinner. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<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 custom"> </i>
<i class = "fa fa-spinner custom"> </i>

Ce chapitre explique l'utilisation des icônes Font Awesome Form Control. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes Font Awesome Form Control. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-check-square custom"> </i>
<i class = "fa fa-check-square-o custom"> </i>
<i class = "fa fa-circle custom"> </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>

Ce chapitre explique l'utilisation des icônes Font Awesome Payment. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes Font Awesome Payment. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-cc-amex custom"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-discover custom"> </i>
<i class = "fa fa-cc-jcb custom"> </i>
<i class = "fa fa-cc-mastercard custom"> </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>

Ce chapitre explique l'utilisation des icônes Font Awesome Chart. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant montre l'utilisation et les résultats des icônes Font Awesome Chart. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<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>

Ce chapitre explique l'utilisation des icônes Font Awesome Currency. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes Font Awesome Currency. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-bitcoin custom"> </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-rouble custom"> </i>
<i class = "fa fa-rub custom"> </i>
<i class = "fa fa-rouble 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>

Ce chapitre explique l'utilisation des icônes de Font Awesome Text Editor. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes de l'éditeur de texte Font Awesome. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "fa fa-align-center custom"> </i>
<i class = "fa fa-align-justify custom"> </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-columns custom"> </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 custom"> </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 custom"> </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 custom"> </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-strikethrough custom"> </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 custom"> </i>
<i class = "fa fa-underline custom"> </i>
<i class = "fa fa-undo custom"> </i>
<i class = "fa fa-unlink custom"> </i>

Ce chapitre explique l'utilisation des icônes directionnelles Font Awesome. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes directionnelles Font Awesome. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<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 custom"> </i>
<i class = "fa fa-arrow-right custom"> </i>
<i class = "fa fa-arrow-up custom"> </i>
<i class = "fa fa-arrows custom"> </i>
<i class = "fa fa-arrows-alt custom"> </i>
<i class = "fa fa-arrows-h custom"> </i>
<i class = "fa fa-arrows-v custom"> </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 custom"> </i>
<i class = "fa fa-caret-square-o-right custom"> </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 custom"> </i>
<i class = "fa fa-chevron-circle-right custom"> </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 custom"> </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>

Ce chapitre explique l'utilisation des icônes Font Awesome Video Player. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant montre l'utilisation et les résultats des icônes Font Awesome Video Player. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Icônes
<i class = "fa fa-arrows-alt custom"> </i>
<i class = "fa fa-backward custom"> </i>
<i class = "fa fa-compress custom"> </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>

Ce chapitre explique l'utilisation des icônes de la marque Font Awesome. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes de marque Font Awesome. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Icônes
<i class = "fa fa-500px custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-cc-diners-club custom"> </i>
<i class = "fa fa-cc-discover custom"> </i>
<i class = "fa fa-cc-jcb custom"> </i>
<i class = "fa fa-cc-mastercard custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-dashcube custom"> </i>
<i class = "fa fa-delicious custom"> </i>
<i class = "fa fa-deviantart custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-github-square custom"> </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 custom"> </i>
<i class = "fa fa-instagram custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-linkedin-square custom"> </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 custom"> </i>
<i class = "fa fa-odnoklassniki-square custom"> </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 custom"> </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 custom"> </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 custom"> </i>
<i class = "fa fa-slack custom"> </i>
<i class = "fa fa-yc-square custom"> </i>
<i class = "fa fa-soundcloud custom"> </i>
<i class = "fa fa-spotify custom"> </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 custom"> </i>
<i class = "fa fa-tencent-weibo custom"> </i>
<i class = "fa fa-trello custom"> </i>
<i class = "fa fa-tripadvisor custom"> </i>
<i class = "fa fa-tumblr custom"> </i>
<i class = "fa fa-tumblr-square custom"> </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 custom"> </i>
<i class = "fa fa-vimeo custom"> </i>
<i class = "fa fa-vimeo-square custom"> </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 fa-xing custom"> </i>
<i class = "fa 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>

Ce chapitre explique l'utilisation des icônes Font Awesome Medical. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant présente l'utilisation et les résultats des icônes Font Awesome Medical. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Icône
<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-stethoscope custom"> </i>
<i class = "fa fa-user-md custom"> </i>
<i class = "fa fa-wheelchair custom"> </i>

Google propose un ensemble de 750 icônes conçues selon les "directives de conception matérielle", appelées Material DesignIcônes. Ces icônes sont simples et prennent en charge tous les navigateurs Web modernes. Étant donné que ces icônes sont basées sur des vecteurs, elles sont également évolutives. Pour utiliser ces icônes, nous devons charger la police (bibliothèque)material-icons.

Chargement de la police (bibliothèque)

Pour charger la bibliothèque d'icônes de matériaux, copiez et collez la ligne suivante dans la section <head> d'une page Web.

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

Utilisation de l'icône

Les icônes matérielles de Google fournissent une longue liste d'icônes. Choisissez l'un d'entre eux et ajoutez le nom de la classe d'icônes à n'importe quel élément HTML de la balise <body>. Dans l'exemple suivant, nous avons utilisé l'icône nomméeaccessibility qui appartient à la catégorie action.

<!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>

Il produira la sortie suivante -

Définition de la taille

Vous pouvez augmenter ou diminuer la taille d'une icône en définissant sa taille dans le CSS et en l'utilisant avec le nom de la classe comme indiqué ci-dessous. Dans l'exemple suivant, nous avons déclaré la taille 6 em.

<!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>

Il produira la sortie suivante -

Définition de la couleur

Vous pouvez utiliser le CSS pour définir la couleur d'une icône. L'exemple suivant montre comment changer la couleur d'une icône appeléeaccessibility.

<!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>

Il produira la sortie suivante -

Liste des catégories

La police Material Icons de Google fournit 519 icônes dans les catégories suivantes -

Icônes d'action
Icônes d'alerte
Icônes AV
Icônes de communication
Icônes de contenu
Icônes de l'appareil
Icônes de l'éditeur
Icônes de fichier
Icônes de matériel
Icônes d'image
Icônes de cartes
Icônes de navigation
Icônes de notification
Icônes sociales
Basculer les icônes

Pour utiliser l'une de ces icônes, vous devez remplacer le nom de classe dans les programmes donnés dans ce chapitre par le nom de classe de l'icône souhaitée. Dans les prochains chapitres de cette unité (Icônes de matériau), nous avons expliqué par catégorie l'utilisation et les sorties respectives de diverses icônes de matériau.

Ce chapitre explique l'utilisation des icônes d'action (Material) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes d'action (Material) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> 3d_rotation </i>	3d_rotation
<i class = "material-icons custom"> accessibilité </i>	accessibilité
<i class = "material-icons custom"> account_balance </i>	account_balance
<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"> alarme </i>	alarme
<i class = "material-icons custom"> alarm_add </i>	alarm_add
<i class = "material-icons custom"> alarm_off </i>	alarm_off
<i class = "material-icons custom"> alarm_on </i>	alarm_on
<i class = "material-icons custom"> android </i>	Android
<i class = "material-icons custom"> annonce </i>	annonce
<i class = "material-icons custom"> rapport_aspect </i>	ratio d'aspect
<i class = "material-icons custom"> évaluation </i>	évaluation
<i class = "material-icons custom"> affectation </i>	affectation
<i class = "material-icons custom"> assignment_ind </i>	affectation_ind
<i class = "material-icons custom"> assignment_late </i>	affectation_late
<i class = "material-icons custom"> retour_affectation </i>	affectation_retour
<i class = "material-icons custom"> assignment_returned </i>	devoir_retourné
<i class = "material-icons custom"> assignment_turned_in </i>	affectation_tournée_in
<i class = "material-icons custom"> renouvellement automatique </i>	renouvellement automatique
<i class = "material-icons custom"> sauvegarde </i>	sauvegarde
<i class = "material-icons custom"> livre </i>	livre
<i class = "material-icons custom"> signet </i>	signet
<i class = "material-icons custom"> bookmark_border </i>	bookmark_border
<i class = "material-icons custom"> rapport de bogue </i>	rapport d'erreur
<i class = "material-icons custom"> construction </i>	construire
<i class = "material-icons custom"> mis en cache </i>	mis en cache
<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>	change_history
<i class = "material-icons custom"> check_circle </i>	check_circle
<i class = "material-icons custom"> chrome_reader_mode </i>	chrome_reader_mode
<i class = "material-icons custom"> classe </i>	classe
<i class = "material-icons custom"> code </i>	code
<i class = "material-icons custom"> carte de crédit </i>	carte de crédit
<i class = "material-icons custom"> tableau de bord </i>	tableau de bord
<i class = "material-icons custom"> supprimer </i>	effacer
<i class = "material-icons custom"> description </i>	la description
<i class = "material-icons custom"> dns </i>	DNS
<i class = "material-icons custom"> terminé </i>	terminé
<i class = "material-icons custom"> done_all </i>	tout fait
<i class = "material-icons custom"> éjecter </i>	éjecter
<i class = "material-icons custom"> événement </i>	un événement
<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"> explorer </i>	explorer
<i class = "material-icons custom"> extension </i>	extension
<i class = "material-icons custom"> face </i>	visage
<i class = "material-icons custom"> favori </i>	favori
<i class = "material-icons custom"> favorite_border </i>	favorite_border
<i class = "material-icons custom"> commentaires </i>	retour d'information
<i class = "material-icons custom"> find_in_page </i>	find_in_page
<i class = "material-icons custom"> find_replace </i>	find_replace
<i class = "material-icons custom"> flight_land </i>	flight_land
<i class = "material-icons custom"> flight_takeoff </i>	flight_takeoff
<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>	obtenir l'application
<i class = "material-icons custom"> gif </i>	gif
<i class = "material-icons custom"> grade </i>	classe
<i class = "material-icons custom"> group_work </i>	travail de groupe
<i class = "material-icons custom"> aide </i>	Aidez-moi
<i class = "material-icons custom"> help_outline </i>	help_outline
<i class = "material-icons custom"> highlight_off </i>	highlight_off
<i class = "material-icons custom"> historique </i>	l'histoire
<i class = "material-icons custom"> accueil </i>	domicile
<i class = "material-icons custom"> hourglass_empty </i>	hourglass_empty
<i class = "material-icons custom"> hourglass_full </i>	hourglass_full
<i class = "material-icons custom"> http </i>	http
<i class = "material-icons custom"> https </i>	https
<i class = "material-icons custom"> informations </i>	Info
<i class = "material-icons custom"> info_outline </i>	info_outline
<i class = "material-icons custom"> entrée </i>	contribution
<i class = "material-icons custom"> invert_colors </i>	Inverser les couleurs
<i class = "material-icons custom"> étiquette </i>	étiquette
<i class = "material-icons custom"> label_outline </i>	label_outline
<i class = "material-icons custom"> langue </i>	Langue
<i class = "material-icons custom"> lancement </i>	lancement
<i class = "material-icons custom"> liste </i>	liste
<i class = "material-icons custom"> verrou </i>	fermer à clé
<i class = "material-icons custom"> lock_open </i>	lock_open
<i class = "material-icons custom"> lock_outline </i>	lock_outline
<i class = "material-icons custom"> fidélité </i>	fidélité
<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>	open_in_browser
<i class = "material-icons custom"> open_in_new </i>	open_in_new
<i class = "material-icons custom"> open_with </i>	ouvrir avec
<i class = "material-icons custom"> page vue </i>	page vue
<i class = "material-icons custom"> paiement </i>	Paiement
<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>	image dans l'image
<i class = "material-icons custom"> play_for_work </i>	play_for_work
<i class = "material-icons custom"> polymère </i>	polymère
<i class = "material-icons custom"> power_settings_new </i>	power_settings_new
<i class = "material-icons custom"> imprimer </i>	impression
<i class = "material-icons custom"> query_builder </i>	query_builder
<i class = "material-icons custom"> question_answer </i>	Question Réponse
<i class = "material-icons custom"> reçu </i>	le reçu
<i class = "material-icons custom"> utiliser </i>	racheter
<i class = "material-icons custom"> réorganiser </i>	réorganiser
<i class = "material-icons custom"> report_problem </i>	signaler un problème
<i class = "material-icons custom"> restaurer </i>	restaurer
<i class = "material-icons custom"> salle </i>	pièce
<i class = "material-icons custom"> calendrier </i>	programme
<i class = "material-icons custom"> recherche </i>	chercher
<i class = "material-icons custom"> paramètres </i>	réglages
<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"> settings_cell </i>	settings_cell
<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"> boutique </i>	magasin
<i class = "material-icons custom"> shop_two </i>	shop_two
<i class = "material-icons custom"> panier_achats </i>	panier
<i class = "material-icons custom"> panier_achat </i>	Panier
<i class = "material-icons custom"> speaker_notes </i>	notes_orateur
<i class = "material-icons custom"> vérification orthographique </i>	vérification orthographique
<i class = "material-icons custom"> star_rate </i>	star_rate
<i class = "material-icons custom"> étoiles </i>	étoiles
<i class = "material-icons custom"> magasin </i>	boutique
<i class = "material-icons custom"> sujet </i>	matière
<i class = "material-icons custom"> supervisor_account </i>	superviseur_account
<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
<i class = "material-icons custom"> onglet </i>	languette
<i class = "material-icons custom"> tab_unselected </i>	tab_unselected
<i class = "material-icons custom"> cinémas </i>	théâtres
<i class = "material-icons custom"> thumb_down </i>	thumb_down
<i class = "material-icons custom"> thumb_up </i>	Pouce en l'air
<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"> aujourd'hui </i>	aujourd'hui
<i class = "material-icons custom"> péage </i>	péage
<i class = "material-icons custom"> track_changes </i>	suivi des modifications
<i class = "material-icons custom"> traduire </i>	traduire
<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"> tourné dans </i>	tourné en
<i class = "material-icons custom"> Verified_user </i>	vérifié_user
<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"> liste_vue </i>	Afficher la liste
<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"> visibilité </i>	visibilité
<i class = "material-icons custom"> visibilité_off </i>	visibilité_off
<i class = "material-icons custom"> travail </i>	travail
<i class = "material-icons custom"> youtube_searched_for </i>	youtube_searched_for
<i class = "material-icons custom"> zoom_in </i>	agrandir
<i class = "material-icons custom"> zoom_out </i>	Dézoomer

Ce chapitre explique l'utilisation des icônes d'alerte (Material) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes d'alerte (Material) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> add_alert </i>	add_alert
Erreur <i class = "material-icons custom"> </i>	Erreur
<i class = "material-icons custom"> error_outline </i>	error_outline
<i class = "material-icons custom"> avertissement </i>	Attention

Ce chapitre explique l'utilisation des icônes AV (Material) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes AV (Material) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> diffusion en direct </i>	airplay
<i class = "material-icons custom"> album </i>	album
<i class = "material-icons custom"> av_timer </i>	av_timer
<i class = "material-icons custom"> Closed_caption </i>	sous-titrage
<i class = "material-icons custom"> égaliseur </i>	égaliseur
<i class = "material-icons custom"> explicite </i>	explicite
<i class = "material-icons custom"> fast_forward </i>	avance rapide
<i class = "material-icons custom"> fast_rewind </i>	fast_rewind
<i class = "material-icons custom"> forward_10 </i>	forward_10
<i class = "material-icons custom"> forward_30 </i>	forward_30
<i class = "material-icons custom"> forward_5 </i>	forward_5
<i class = "material-icons custom"> jeux </i>	Jeux
<i class = "material-icons custom"> hd </i>	haute définition
<i class = "material-icons custom"> audition </i>	audition
<i class = "material-icons custom"> high_quality </i>	haute qualité
<i class = "material-icons custom"> library_add </i>	library_add
<i class = "material-icons custom"> livres_bibliothèques </i>	library_books
<i class = "material-icons custom"> library_music </i>	library_music
<i class = "material-icons custom"> boucle </i>	boucle
<i class = "material-icons custom"> micro </i>	micro
<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"> film </i>	film
<i class = "material-icons custom"> pause_circle_outline </i>	pause_circle_outline
<i class = "material-icons custom"> new_releases </i>	nouvelles versions
<i class = "material-icons custom"> not_interested </i>	pas intéressé
<i class = "material-icons custom"> pause </i>	pause
<i class = "material-icons custom"> pause_circle_filled </i>	pause_circle_filled
<i class = "material-icons custom"> play_arrow </i>	play_arrow
<i class = "material-icons custom"> play_circle_filled </i>	play_circle_filled
<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"> file d'attente </i>	queue
<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>	recent_actors
<i class = "material-icons custom"> répéter </i>	répéter
<i class = "material-icons custom"> repeat_one </i>	repeat_one
<i class = "material-icons custom"> relecture </i>	rejouer
<i class = "material-icons custom"> diffusion en direct </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"> lecture aléatoire </i>	mélanger
<i class = "material-icons custom"> skip_next </i>	passez au suivant
<i class = "material-icons custom"> skip_previous </i>	skip_previous
<i class = "material-icons custom"> répéter </i>	roupillon
<i class = "material-icons custom"> sort_by_alpha </i>	sort_by_alpha
<i class = "material-icons custom"> arrêter </i>	Arrêtez
<i class = "material-icons custom"> sous-titres </i>	Les sous-titres
<i class = "material-icons custom"> surround_sound </i>	son surround
<i class = "material-icons custom"> video_library </i>	video_library
<i class = "material-icons custom"> caméra vidéo </i>	caméra vidéo
<i class = "material-icons custom"> videocam_off </i>	videocam_off
<i class = "material-icons custom"> volume_down </i>	baisser le volume
<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>	monter le son
<i class = "material-icons custom"> web </i>	la toile

Ce chapitre explique l'utilisation des icônes de communication (matérielle) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de communication (matérielle) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> entreprise </i>	affaires
<i class = "material-icons custom"> appel </i>	appel
<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>	bavarder
<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>	tout effacer
<i class = "material-icons custom"> commentaire </i>	commentaire
<i class = "material-icons custom"> contact_phone </i>	Numéro du contact
<i class = "material-icons custom"> contacts </i>	Contacts
<i class = "material-icons custom"> dialer_sip </i>	dialer_sip
<i class = "material-icons custom"> pavé numérique </i>	Pavé numérique
<i class = "material-icons custom"> forum </i>	forum
<i class = "material-icons custom"> import_export </i>	Importer / Exporter
<i class = "material-icons custom"> invert_colors_off </i>	invert_colors_off
<i class = "material-icons custom"> live_help </i>	aide en direct
<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"> message </i>	message
<i class = "material-icons custom"> no_sim </i>	no_sim
<i class = "material-icons custom"> téléphone </i>	téléphone
<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"> speaker_phone </i>	speaker_phone
<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"> textms </i>	SMS
<i class = "material-icons custom"> messagerie vocale </i>	messagerie vocale
<i class = "material-icons custom"> vpn_key </i>	vpn_key
<i class = "material-icons custom"> e-mail </i>	email
<i class = "material-icons custom"> call_end </i>	call_end

Ce chapitre explique l'utilisation des icônes de contenu (matériel) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de contenu (matériel) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> ajouter </i>	ajouter
<i class = "material-icons custom"> add_box </i>	add_box
<i class = "material-icons custom"> add_circle </i>	add_circle
<i class = "material-icons custom"> add_circle_outline </i>	add_circle_outline
<i class = "material-icons custom"> archive </i>	archiver
<i class = "material-icons custom"> retour arrière </i>	retour arrière
<i class = "material-icons custom"> bloc </i>	bloquer
<i class = "material-icons custom"> effacer </i>	clair
<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"> créer </i>	créer
<i class = "material-icons custom"> brouillons </i>	brouillons
<i class = "material-icons custom"> liste_filtre </i>	filter_list
<i class = "material-icons custom"> indicateur </i>	drapeau
<i class = "material-icons custom"> font_download </i>	font_download
<i class = "material-icons custom"> avant </i>	vers l'avant
<i class = "material-icons custom"> geste </i>	geste
<i class = "material-icons custom"> boîte de réception </i>	boîte de réception
<i class = "material-icons custom"> lien </i>	lien
<i class = "material-icons custom"> courrier </i>	courrier
<i class = "material-icons custom"> markunread </i>	Marquer comme non lu
<i class = "material-icons custom"> refaire </i>	refaire
<i class = "material-icons custom"> supprimer </i>	retirer
<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"> réponse </i>	réponse
<i class = "material-icons custom"> reply_all </i>	répondre à tous
<i class = "material-icons custom"> rapport </i>	rapport
<i class = "material-icons custom"> enregistrer </i>	enregistrer
<i class = "material-icons custom"> select_all </i>	tout sélectionner
<i class = "material-icons custom"> envoyer </i>	envoyer
<i class = "material-icons custom"> tri </i>	Trier
<i class = "material-icons custom"> text_format </i>	text_format
<i class = "material-icons custom"> stay_current_portrait </i>	stay_current_portrait
<i class = "material-icons custom"> annuler </i>	annuler

Ce chapitre vous explique l'utilisation des icônes de périphérique (matériel) de Google. Suppose quecustom est le nom de la classe CSS dans laquelle nous avons défini la taille et la couleur comme indiqué ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de périphérique (matériel) de Google.

Usage	Résultat
<i class = "material-icons custom"> access_alarm </i>	access_alarm
<i class = "material-icons custom"> access_alarms </i>	access_alarms
<i class = "material-icons custom"> access_time </i>	temps d'accès
<i class = "material-icons custom"> add_alarm </i>	add_alarm
<i class = "material-icons custom"> airplanemode_active </i>	airplanemode_active
<i class = "material-icons custom"> airplanemode_inactive </i>	airplanemode_inactive
<i class = "material-icons custom"> battery_alert </i>	batterie_alert
<i class = "material-icons custom"> battery_charging_full </i>	battery_charging_full
<i class = "material-icons custom"> battery_full </i>	battery_full
<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>	recherche_bluetooth
<i class = "material-icons custom"> bright_auto </i>	luminosité_auto
<i class = "material-icons custom"> bright_high </i>	luminosité_haute
<i class = "material-icons custom"> bright_low </i>	luminosité_low
<i class = "material-icons custom"> bright_medium </i>	luminosité_moyenne
<i class = "material-icons custom"> data_usage </i>	l'utilisation de données
<i class = "material-icons custom"> developer_mode </i>	mode développeur
<i class = "material-icons custom"> appareils </i>	dispositifs
<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 custom"> graphic_eq </i>	graphic_eq
<i class = "material-icons custom"> location_disabled </i>	Localisation désactivée
<i class = "material-icons custom"> location_searching </i>	location_searching
<i class = "material-icons custom"> network_cell </i>	network_cell
<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>	rotation de l'écran
<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"> stockage </i>	espace de rangement
<i class = "material-icons custom"> usb </i>	USB
<i class = "material-icons custom"> fond d'écran </i>	fond d'écran
<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

Ce chapitre explique l'utilisation des icônes de l'éditeur (Material) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de l'éditeur (de matériaux) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> attach_file </i>	Pièce jointe
<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>	Bordure du bas
<i class = "material-icons custom"> border_clear </i>	border_clear
<i class = "material-icons custom"> border_color </i>	couleur de la bordure
<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>	style de bordure
<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 custom"> format_bold </i>	format_bold
<i class = "material-icons custom"> 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 custom"> 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"> format_size </i>	format_size
<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"> fonctions </i>	les fonctions
<i class = "material-icons custom"> insert_chart </i>	insert_chart
<i class = "material-icons custom"> insert_comment </i>	insert_comment
<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 custom"> insert_link </i>	insert_link
<i class = "material-icons custom"> insert_photo </i>	insert_photo
<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"> publier </i>	publier
<i class = "material-icons custom"> barre_espace </i>	barre_espace
<i class = "material-icons custom"> strikethrough_s </i>	strikethrough_s
<i class = "material-icons custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icons custom"> 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

Ce chapitre explique l'utilisation des icônes de fichier (matériel) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de fichier (matériel) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> pièce jointe </i>	attachement
<i class = "material-icons custom"> cloud </i>	nuage
<i class = "material-icons custom"> cloud_circle </i>	cloud_circle
<i class = "material-icons custom"> cloud_done </i>	cloud_done
<i class = "material-icons custom"> cloud_download </i>	cloud_download
<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"> file_download </i>	téléchargement de fichier
<i class = "material-icons custom"> file_upload </i>	téléchargement de fichiers
<i class = "material-icons custom"> dossier </i>	dossier
<i class = "material-icons custom"> folder_open </i>	folder_open
<i class = "material-icons custom"> folder_shared </i>	folder_shared

Ce chapitre explique l'utilisation des icônes de matériel (matériel) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de matériel (matériel) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> distribution </i>	jeter
<i class = "material-icons custom"> cast_connected </i>	cast_connected
<i class = "material-icons custom"> ordinateur </i>	ordinateur
<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"> périphérique_hub </i>	périphérique_hub
<i class = "material-icons custom"> dock </i>	Dock
<i class = "material-icons custom"> manette de jeu </i>	manette de jeu
<i class = "material-icons custom"> casque </i>	casque
<i class = "material-icons custom"> headset_mic </i>	headset_mic
<i class = "material-icons custom"> clavier </i>	clavier
<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"> ordinateur portable </i>	portable
<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"> mémoire </i>	Mémoire
<i class = "material-icons custom"> souris </i>	Souris
<i class = "material-icons custom"> phone_android </i>	phone_android
<i class = "material-icons custom"> phone_iphone </i>	phone_iphone
<i class = "material-icons custom"> lien phonel </i>	lien phono
<i class = "material-icons custom"> phonelink_off </i>	phonelink_off
<i class = "material-icons custom"> power_input </i>	entrée de puissance
<i class = "material-icons custom"> routeur </i>	routeur
<i class = "material-icons custom"> scanner </i>	scanner
<i class = "material-icons custom"> sécurité </i>	Sécurité
<i class = "material-icons custom"> sim_card </i>	carte SIM
<i class = "material-icons custom"> smartphone </i>	téléphone intelligent
<i class = "material-icons custom"> haut-parleur </i>	orateur
<i class = "material-icons custom"> speaker_group </i>	speaker_group
<i class = "material-icons custom"> tablette </i>	tablette
<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"> jouets </i>	jouets
<i class = "material-icons custom"> tv </i>	la télé
<i class = "material-icons custom"> montre </i>	regarder

Ce chapitre explique l'utilisation des icônes d'image (matérielle) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes d'image (Material) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> add_to_photos </i>	add_to_photos
<i class = "material-icons custom"> ajuster </i>	régler
<i class = "material-icons custom"> assistant </i>	assistant
<i class = "material-icons custom"> assistant </i>	assistant
<i class = "material-icons custom"> piste audio </i>	piste audio
<i class = "material-icons custom"> blur_circular </i>	blur_circular
<i class = "material-icons custom"> blur_linear </i>	flou_linéaire
<i class = "material-icons custom"> blur_off </i>	blur_off
<i class = "material-icons custom"> blur_on </i>	blur_on
<i class = "material-icons custom"> luminosité_1 </i>	luminosité_1
<i class = "material-icons custom"> luminosité_2 </i>	luminosité_2
<i class = "material-icons custom"> luminosité_3 </i>	luminosité_3
<i class = "material-icons custom"> luminosité_4 </i>	luminosité_4
<i class = "material-icons custom"> luminosité_5 </i>	luminosité_5
<i class = "material-icons custom"> luminosité_6 </i>	luminosité_6
<i class = "material-icons custom"> luminosité_7 </i>	luminosité_7
<i class = "material-icons custom"> broken_image </i>	broken_image
<i class = "material-icons custom"> pinceau </i>	brosse
<i class = "material-icons custom"> appareil photo </i>	caméra
<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>	camera_roll
<i class = "material-icons custom"> center_focus_strong </i>	center_focus_strong
<i class = "material-icons custom"> center_focus_weak </i>	center_focus_weak
<i class = "material-icons custom"> collections </i>	collections
<i class = "material-icons custom"> collections_bookmark </i>	collections_bookmark
<i class = "material-icons custom"> color_lens </i>	color_lens
<i class = "material-icons custom"> coloriser </i>	coloriser
<i class = "material-icons custom"> comparer </i>	comparer
<i class = "material-icons custom"> control_point </i>	point de contrôle
<i class = "material-icons custom"> control_point_duplicate </i>	control_point_duplicate
<i class = "material-icons custom"> recadrage </i>	surgir
<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"> dehaze </i>	déshumidifier
<i class = "material-icons custom"> détails </i>	détails
<i class = "material-icons custom"> modifier </i>	Éditer
<i class = "material-icons custom"> exposition </i>	exposition
<i class = "material-icons custom"> exposition_neg_1 </i>	exposition_neg_1
<i class = "material-icons custom"> exposition_plus_1 </i>	exposition_plus_1
<i class = "material-icons custom"> exposition_plus_2 </i>	exposition_plus_2
<i class = "material-icons custom"> exposition_zero </i>	exposition_zero
<i class = "material-icons custom"> filtre </i>	filtre
<i class = "material-icons custom"> filtre_1 </i>	filtre_1
<i class = "material-icons custom"> filter_2 </i>	filtre_2
<i class = "material-icons custom"> filter_3 </i>	filtre_3
<i class = "material-icons custom"> filter_4 </i>	filtre_4
<i class = "material-icons custom"> filter_5 </i>	filter_5
<i class = "material-icons custom"> filter_6 </i>	filtre_6
<i class = "material-icons custom"> filter_7 </i>	filtre_7
<i class = "material-icons custom"> filter_8 </i>	filtre_8
<i class = "material-icons custom"> filter_9 </i>	filtre_9
<i class = "material-icons custom"> filter_9_plus </i>	filter_9_plus
<i class = "material-icons custom"> filter_b_and_w </i>	filter_b_and_w
<i class = "material-icons custom"> filter_center_focus </i>	filter_center_focus
<i class = "material-icons custom"> filter_drama </i>	filter_drama
<i class = "material-icons custom"> filter_frames </i>	filter_frames
<i class="material-icons custom">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 custom">filter_vintage</i>	filter_vintage
<i class="material-icons custom">flare</i>	flare
<i class="material-icons custom">flash_auto</i>	flash_auto
<i class="material-icons custom">flash_off</i>	flash_off
<i class="material-icons custom">flash_on</i>	flash_on
<i class="material-icons custom">flip</i>	flip
<i class="material-icons custom">gradient</i>	gradient
<i class="material-icons custom">grain</i>	grain
<i class="material-icons custom">grid_off</i>	grid_off
<i class="material-icons custom">grid_on</i>	grid_on
<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_strong
<i class="material-icons custom">hdr_weak</i>	hdr_weak
<i class="material-icons custom">healing</i>	healing
<i class="material-icons custom">image</i>	image
<i class="material-icons custom">image_aspect_ratio</i>	image_aspect_ratio
<i class="material-icons custom">iso</i>	iso
<i class="material-icons custom">landscape</i>	landscape
<i class="material-icons custom">leak_add</i>	leak_add
<i class="material-icons custom">leak_remove</i>	leak_remove
<i class="material-icons custom">lens</i>	lens
<i class="material-icons custom">looks</i>	looks
<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">loupe</i>	loupe
<i class="material-icons custom">monochrome_photos</i>	monochrome_photos
<i class="material-icons custom">movie_creation</i>	movie_creation
<i class="material-icons custom">music_note</i>	music_note
<i class="material-icons custom">nature</i>	nature
<i class="material-icons custom">nature_people</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>	navigate_before
<i class="material-icons custom">palette</i>	palette
<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">photo</i>	photo
<i class="material-icons custom">photo_album</i>	photo_album
<i class="material-icons custom">photo_camera</i>	photo_camera
<i class="material-icons custom">photo_library</i>	photo_library
<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>	picture_as_pdf
<i class="material-icons custom">portrait</i>	portrait
<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>	rotate_left
<i class="material-icons custom">rotate_right</i>	rotate_right
<i class="material-icons custom">slideshow</i>	slideshow
<i class="material-icons custom">straighten</i>	straighten
<i class="material-icons custom">style</i>	style
<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">texture</i>	texture
<i class="material-icons custom">timelapse</i>	timelapse
<i class="material-icons custom">timer</i>	timer
<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">tonality</i>	tonality
<i class="material-icons custom">transform</i>	transform
<i class="material-icons custom">tune</i>	tune
<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">vignette</i>	vignette
<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_incandescent
<i class="material-icons custom">wb_iridescent</i>	wb_iridescent

This chapter explains the usage of Google's (Material) Maps 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) Maps 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">beenhere</i>	beenhere
<i class="material-icons custom">directions</i>	directions
<i class="material-icons custom">directions_bike</i>	directions_bike
<i class="material-icons custom">directions_boat</i>	directions_boat
<i class="material-icons custom">directions_bus</i>	directions_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">flight</i>	flight
<i class="material-icons custom">hotel</i>	hotel
<i class="material-icons custom">layers</i>	layers
<i class="material-icons custom">layers_clear</i>	layers_clear
<i class="material-icons custom">local_activity</i>	local_activity
<i class="material-icons custom">local_airport</i>	local_airport
<i class="material-icons custom">local_atm</i>	local_atm
<i class="material-icons custom">local_bar</i>	local_bar
<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">local_drink</i>	local_drink
<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

Ce chapitre explique l'utilisation des icônes sociales (matérielles) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes sociales (matérielles) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> gâteau </i>	gâteau
<i class = "material-icons custom"> domaine </i>	domaine
<i class = "material-icons custom"> groupe </i>	groupe
<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"> ambiance </i>	ambiance
<i class = "material-icons custom"> mood_bad </i>	mauvaise humeur
<i class = "material-icons custom"> notifications </i>	notifications
<i class = "material-icons custom"> notifications_active </i>	notifications_active
<i class = "material-icons custom"> notifications_none </i>	notifications_none
<i class = "material-icons custom"> notifications_off </i>	notifications_off
<i class = "material-icons custom"> notifications_paused </i>	notifications_paused
<i class = "material-icons custom"> pages </i>	pages
<i class = "material-icons custom"> party_mode </i>	mode de fete
<i class = "material-icons custom"> personnes </i>	personnes
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> personne </i>	la personne
<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>	un de plus
<i class = "material-icons custom"> sondage </i>	sondage
<i class = "material-icons custom"> public </i>	Publique
<i class = "material-icons custom"> école </i>	école
<i class = "material-icons custom"> partager </i>	partager
<i class = "material-icons custom"> whatshot </i>	ce qui est chaud

Ce chapitre explique l'utilisation des icônes de bascule (Material) de Google. Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

<!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>

Le tableau suivant contient l'utilisation et les résultats des icônes de bascule (Material) de Google. Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "material-icons custom"> case à cocher </i>	case à cocher
<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"> étoile </i>	étoile
<i class = "material-icons custom"> star_border </i>	star_border
<i class = "material-icons custom"> star_half </i>	star_half

Il s'agit d'une bibliothèque d'icônes monochromatiques disponibles dans des formats d'image raster, des formats d'image vectorielle et sous forme de polices. Il fournit plus de 250 glyphes au format de police. Vous pouvez utiliser ces polices dans vos projets Web. Ces glyphes ne sont pas gratuits, cependant si vous n'avez rien à dépenser au cas où vous les utiliseriez dans des projets basés sur Bootstrap.

Chargement de la police (bibliothèque)

Pour charger la bibliothèque Bootstrap Glyphicons, copiez et collez la ligne suivante dans la section <head> de la page Web.

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

Utilisation de l'icône

Bootstrap Glyphicons fournit un certain nombre d'icônes. Choisissez l'un d'eux et ajoutez le nom de la classe d'icônes à n'importe quel élément HTML de la balise <body>. Dans l'exemple suivant, nous avons utilisé l'icône de l'arbre et son nom de classe esttree-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>

Il produira la sortie suivante -

Définition de la taille

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

Il produira la sortie suivante:

Définition de la couleur

Vous pouvez définir la couleur d'une icône à l'aide du CSS. L'exemple suivant montre comment modifier la couleur de l'icône de l'arborescence.

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

Il produira la sortie suivante -

Ce chapitre explique l'utilisation de Bootstrap Glyphicons (Components). Suppose quecustom est le nom de la classe CSS où nous avons défini la taille et la couleur, comme indiqué dans l'exemple ci-dessous.

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

Le tableau suivant contient l'utilisation et les résultats de Bootstrap Glyphicons (Components). Remplacez la balise <body> du programme ci-dessus par le code donné dans le tableau pour obtenir les sorties respectives -

Usage	Résultat
<i class = "glyphicon glyphicon-asterisk custom"> </i>
<i class = "glyphicon glyphicon-plus custom"> </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-wrap custom"> </i>
<i class = "glyphicon glyphicon-pencil custom"> </i>
<i class = "glyphicon glyphicon-glass custom"> </i>
<i class = "glyphicon glyphicon-music custom"> </i>
<i class = "glyphicon glyphicon-search custom"> </i>
<i class = "glyphicon glyphicon-heart custom"> </i>
<i class = "glyphicon glyphicon-star custom"> </i>
<i class = "glyphicon glyphicon-star-empty custom"> </i>
<i class = "glyphicon glyphicon-user custom"> </i>
<i class = "glyphicon glyphicon-film custom"> </i>
<i class = "glyphicon glyphicon-th-large custom"> </i>
<i class = "glyphicon glyphicon-th custom"> </i>
<i class = "glyphicon glyphicon-th-list custom"> </i>
<i class = "glyphicon glyphicon-ok custom"> </i>
<i class = "glyphicon glyphicon-remove custom"> </i>
<i class = "glyphicon glyphicon-zoom-in custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-trash custom"> </i>
<i class = "glyphicon glyphicon-home custom"> </i>
<i class = "glyphicon glyphicon-file custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-lock custom"> </i>
<i class = "glyphicon glyphicon-flag custom"> </i>
<i class = "glyphicon glyphicon-casque custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-barcode custom"> </i>
<i class = "glyphicon glyphicon-tag custom"> </i>
<i class = "glyphicon glyphicon-tags custom"> </i>
<i class = "glyphicon glyphicon-book custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-align-center custom"> </i>
<i class = "glyphicon glyphicon-align-right custom"> </i>
<i class = "glyphicon glyphicon-align-justify custom"> </i>
<i class = "glyphicon glyphicon-list custom"> </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 custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-pause custom"> </i>
<i class = "glyphicon glyphicon-stop custom"> </i>
<i class = "glyphicon glyphicon-forward custom"> </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 custom"> </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 custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-ban-circle custom"> </i>
<i class = "glyphicon glyphicon-arrow-left custom"> </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 custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-calendar custom"> </i>
<i class = "glyphicon glyphicon-random custom"> </i>
<i class = "glyphicon glyphicon-comment custom"> </i>
<i class = "glyphicon glyphicon-magnet custom"> </i>
<i class = "glyphicon glyphicon-chevron-up custom"> </i>
<i class = "glyphicon glyphicon-chevron-down custom"> </i>
<i class = "glyphicon glyphicon-retweet custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-bullhorn custom"> </i>
<i class = "glyphicon glyphicon-bell custom"> </i>
<i class = "glyphicon glyphicon-certificate custom"> </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 custom"> </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 custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-up custom"> </i>
<i class = "glyphicon glyphicon-circle-arrow-down custom"> </i>
<i class = "glyphicon glyphicon-globe custom"> </i>
<i class = "glyphicon glyphicon-wrench custom"> </i>
<i class = "glyphicon glyphicon-tasks custom"> </i>
<i class = "glyphicon glyphicon-filter custom"> </i>
<i class = "glyphicon glyphicon-briefcase custom"> </i>
<i class = "glyphicon glyphicon-fullscreen custom"> </i>
<i class = "glyphicon glyphicon-dashboard custom"> </i>
<i class = "glyphicon glyphicon-paperclip custom"> </i>
<i class = "glyphicon glyphicon-heart-empty custom"> </i>
<i class = "glyphicon glyphicon-link custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-pushpin custom"> </i>
<i class = "glyphicon glyphicon-usd custom"> </i>
<i class = "glyphicon glyphicon-gbp custom"> </i>
<i class = "glyphicon glyphicon-sort custom"> </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-attributes custom"> </i>
<i class = "glyphicon glyphicon-sort-by-attributes-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 custom"> </i>
<i class = "glyphicon glyphicon-save custom"> </i>
<i class = "glyphicon glyphicon-open custom"> </i>
<i class = "glyphicon glyphicon-saved custom"> </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-pressure custom"> </i>
<i class = "glyphicon glyphicon-earphone custom"> </i>
<i class = "glyphicon glyphicon-phone custom"> </i>
<i class = "glyphicon glyphicon-tower custom"> </i>
<i class = "glyphicon glyphicon-stats custom"> </i>
<i class = "glyphicon glyphicon-sd-video custom"> </i>
<i class = "glyphicon glyphicon-hd-video custom"> </i>
<i class = "glyphicon glyphicon-subtitles custom"> </i>
<i class = "glyphicon glyphicon-sound-stereo custom"> </i>
<i class = "glyphicon glyphicon-sound-dolby custom"> </i>
<i class = "glyphicon glyphicon-sound-5-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-6-1 custom"> </i>
<i class = "glyphicon glyphicon-sound-7-1 custom"> </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>