![Page 1: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/1.jpg)
![Page 2: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/2.jpg)
Web Icons
i
About the Tutorial
We have a number of Icon Fonts (libraries) available that can be used on HTML pages
just the way we use normal text fonts. Font Awesome, Bootstrap Glyphicons, and Google's
Material Icons are the prominent Icon Fonts used frequently by web developers. This
tutorial explains how to use these Icon Fonts in practice.
Audience
This tutorial is meant for HTML developers who would like to use icons on their webpages.
Prerequisites
This tutorial is meant for HTML developers who would like to use icons on their webpages.
Copyright & Disclaimer
Copyright 2015 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I)
Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish
any contents or a part of contents of this e-book in any manner without written consent
of the publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.
Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our
website or its contents including this tutorial. If you discover any errors on our website or
in this tutorial, please notify us at [email protected]
![Page 3: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/3.jpg)
Web Icons
ii
Table of Contents
About the Tutorial .................................................................................................................................... i
Audience .................................................................................................................................................. i
Prerequisites ............................................................................................................................................ i
Copyright & Disclaimer ............................................................................................................................. i
Table of Contents .................................................................................................................................... ii
1. WEB ICONS – INTRODUCTION ............................................................................................. 1
Icon Fonts ................................................................................................................................................ 1
Font Awesome ........................................................................................................................................ 1
Bootstrap Glyphicons .............................................................................................................................. 1
Google's Material Icons ........................................................................................................................... 2
2. FONT AWESOME ICONS ...................................................................................................... 4
Loading the Font Library.......................................................................................................................... 4
Using the Icon ......................................................................................................................................... 4
Defining the Size ..................................................................................................................................... 4
Defining the Color ................................................................................................................................... 5
List of Categories ..................................................................................................................................... 6
3. FONT AWESOME – WEB ICONS ........................................................................................... 7
4. FONT AWESOME – HAND ICONS ....................................................................................... 30
5. FONT AWESOME – TRANSPORTATION ICONS ................................................................... 32
6. FONT AWESOME – GENDER ICONS ................................................................................... 34
7. FONT AWESOME – FILE TYPE ICONS .................................................................................. 36
8. FONT AWESOME – SPINNER ICONS ................................................................................... 38
![Page 4: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/4.jpg)
Web Icons
iii
9. FONT AWESOME – FORM CONTROL ICONS ....................................................................... 40
10. FONT AWESOME – PAYMENT ICONS ................................................................................. 42
11. FONT AWESOME – CHART ICONS ...................................................................................... 44
12. FONT AWESOME – CURRENCY ICONS ............................................................................... 46
13. FONT AWESOME – TEXT EDITOR ICONS ............................................................................ 49
14. FONT AWESOME – DIRECTIONAL ICONS ........................................................................... 53
15. FONT AWESOME – VIDEO PLAYER ICONS .......................................................................... 57
16. FONT AWESOME – BRAND ICONS ..................................................................................... 60
17. FONT AWESOME – MEDICAL ICONS .................................................................................. 70
18. MATERIAL ICONS ............................................................................................................... 73
19. MATERIAL – ACTION ICONS ............................................................................................... 77
20. MATERIAL – ALERT ICONS ................................................................................................. 89
21. MATERIAL – AV ICONS ....................................................................................................... 91
22. MATERIAL – COMMUNICATION ICONS .............................................................................. 96
23. MATERIAL – CONTENT ICONS .......................................................................................... 100
24. MATERIAL – DEVICE ICONS .............................................................................................. 104
25. MATERIAL – EDITOR ICONS ............................................................................................. 108
26. MATERIAL – FILE ICONS ................................................................................................... 113
27. MATERIAL – HARDWARE ICONS ...................................................................................... 115
28. MATERIAL – IMAGE ICONS .............................................................................................. 119
![Page 5: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/5.jpg)
Web Icons
iv
29. MATERIAL – MAPS ICONS ................................................................................................ 129
30. MATERIAL – NAVIGATION ICONS ..................................................................................... 134
31. MATERIAL – NOTIFICATION ICONS .................................................................................. 137
32. MATERIAL – SOCIAL ICONS .............................................................................................. 141
33. MATERIAL – TOGGLE ICONS ............................................................................................ 144
34. BOOTSTRAP GLYPHICONS ................................................................................................ 147
35. BOOTSTRAP COMPONENTS ............................................................................................. 150
![Page 6: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/6.jpg)
Web Icons
5
An icon is a symbol that is used to represent a specific action or a capability on a webpage.
Icons are used in documents as well as applications and they can be either selectable or non-
selectable. For example, the images that we see on the buttons of an application are all icons
and these buttons are selectable. Similarly, when we use an icon as a company logo, it is
normally non-selectable.
In Windows environment, if we mute the system volume, it will be represented with the help
of an icon, as shown below.
Using web icons, we can represent a loading page, a disabled option, a link, a redirection, etc.
These icons can be flipped, rotated, resized, bordered, inverted, and colored.
Icon Fonts
Icon Fonts contain symbols and glyphs. Once you load a desired font, you can use any of the
icons provided by that font using the class name of the icon. We can also apply different colors
to the icons and resize them using the CSS properties. There are several icon libraries(fonts)
that provide icons. This tutorial focuses on three main fonts, namely −
Font Awesome
Bootstrap Glyphicons
Google's Material Icons
Font Awesome
This font provides 519 free scalable vector icons. This library is completely free, for both
personal as well as commercial use. These icons can be customized easily. Originally, they
were developed for Bootstrap.
1. WEB ICONS – INTRODUCTION
![Page 7: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/7.jpg)
Web Icons
6
Bootstrap Glyphicons
This is a library of monochromatic icons available in raster image formats, vector image
formats, and as fonts. It provides over 250 glyphs in font format. You can use these fonts in
your web projects. These icons are not free, however you can use them in Bootstrap based
projects without having to purchase them.
Google's Material Icons
Google provides about 750 icons designed under "material designed guidelines" and these are
known as Material Design icons. These icons are simple and they support all modern web
browsers. Since these icons are vector based, they are scalable as well. To use these icons,
we have to load the font (library) material-icons.
![Page 8: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/8.jpg)
Web Icons
7
Part 1 – Font Awesome
![Page 9: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/9.jpg)
Web Icons
8
Font Awesome icons library provides 519 free scalable vector icons. This library is completely
free for both personal and commercial use. Originally designed for Bootstrap, these icons can
be customized easily.
Loading the Font Library
To load the Font Awesome library, copy and paste the following line in the <head> section of
the webpage.
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.3.0/css/font-awesome.min.css">
</head>
Using the Icon
Font Awesome provides several icons. Choose one of them and add the name of the icon class
to any HTML element within the < body > tag. In the following example, we have used the
icon of the Indian currency.
<html>
<head>
<link rel="stylesheet" href="http://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>
It will produce the following output:
2. FONT AWESOME ICONS
![Page 10: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/10.jpg)
Web Icons
9
Defining the Size
You can increase or decrease the size of an icon by defining its size using CSS and using it
along with the class name, as shown below. In the given example, we have declared the size
as 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>
It will produce the following output:
Defining the Color
Just like size, you can define the color of the icons using CSS. The following example shows
how to change the color of the Indian currency icon.
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.3.0/css/font-awesome.min.css">
<style>
![Page 11: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/11.jpg)
Web Icons
10
i.custom {font-size: 6em; color: red;}
</style>
</head>
<body>
<i class="fa fa-inr custom"></i>
</body>
</html>
List of Categories
Font Awesome provides 519 icons in the following categories −
Web Application Icons
Hand Icons
Transportation Icons
Gender Icons
File Type Icons
Spinner Icons
Form Control Icons
Payment Icons
Chart Icons
Currency Icons
Text editor Icons
Directional Icons
Video Player Icons
Brand Icons
To use any of these icons, you have to replace the class name in the programs given in this
chapter with the class name of the desired icon. In the coming chapters of this Unit (Font
Awesome), we have explained category-wise the usage and the respective outputs of various
Font Awesome icons.
![Page 12: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/12.jpg)
Web Icons
11
This chapter explains the usage of Font Awesome Web Application icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example
given below.
<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>
The following table shows the usage and the results of Font Awesome Web Application 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="fa fa-adjust custom"></i>
<i class="fa fa-anchor custom"></i>
3. FONT AWESOME – WEB ICONS
![Page 13: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/13.jpg)
Web Icons
12
<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>
![Page 14: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/14.jpg)
Web Icons
13
<i class="fa fa-bed custom"></i>
<i class="fa fa-beer custom"></i>
<i class="fa fa-bell custom"></i>
<i class="fa fa-wrench custom"></i>
<i class="fa fa-bell-o custom"></i>
<i class="fa fa-bell-slash custom"></i>
<i class="fa fa-bell-slash-o custom"></i>
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-battery-0 custom"></i>
<i class="fa fa-battery-1 custom"></i>
<i class="fa fa-battery-2 custom"></i>
<i class="fa fa-battery-3 custom"></i>
<i class="fa fa-battery-4 custom"></i>
<i class="fa fa-battery-empty custom"></i>
<i class="fa fa-battery-quarter custom"></i>
![Page 15: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/15.jpg)
Web Icons
14
<i class="fa fa-battery-half custom"></i>
<i class="fa fa-battery-three-quarters
custom"></i>
<i class="fa fa-battery-full custom"></i>
<i class="fa fa-birthday-cake custom"></i>
<i class="fa fa-bolt custom"></i>
<i class="fa fa-bomb custom"></i>
<i class="fa fa-book custom"></i>
<i class="fa fa-bookmark custom"></i>
<i class="fa fa-bookmark-o custom"></i>
<i class="fa fa-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>
![Page 16: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/16.jpg)
Web Icons
15
<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>
![Page 17: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/17.jpg)
Web Icons
16
<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>
![Page 18: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/18.jpg)
Web Icons
17
<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>
![Page 19: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/19.jpg)
Web Icons
18
<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>
![Page 20: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/20.jpg)
Web Icons
19
<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-envelope custom"></i>
<i class="fa fa-envelope-o custom"></i>
<i class="fa fa-envelope-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>
![Page 21: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/21.jpg)
Web Icons
20
<i class="fa fa-eye custom"></i>
<i class="fa fa-eye-slash custom"></i>
<i class="fa fa-eyedropper custom"></i>
<i class="fa fa-fax custom"></i>
<i class="fa fa-feed 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>
![Page 22: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/22.jpg)
Web Icons
21
<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>
![Page 23: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/23.jpg)
Web Icons
22
<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>
![Page 24: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/24.jpg)
Web Icons
23
<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-headphones custom"></i>
![Page 25: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/25.jpg)
Web Icons
24
<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>
![Page 26: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/26.jpg)
Web Icons
25
<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>
![Page 27: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/27.jpg)
Web Icons
26
<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>
![Page 28: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/28.jpg)
Web Icons
27
<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>
![Page 29: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/29.jpg)
Web Icons
28
<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>
![Page 30: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/30.jpg)
Web Icons
29
<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>
![Page 31: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/31.jpg)
Web Icons
30
<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>
![Page 32: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/32.jpg)
Web Icons
31
<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>
![Page 33: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/33.jpg)
Web Icons
32
<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>
![Page 34: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/34.jpg)
Web Icons
33
<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>
![Page 35: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/35.jpg)
Web Icons
34
<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>
![Page 36: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/36.jpg)
Web Icons
35
<i class="fa fa-toggle-right custom"></i>
<i class="fa fa-toggle-up custom"></i>
<i class="fa fa-trademark 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-umbrella custom"></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>
![Page 37: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/37.jpg)
Web Icons
36
<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>
![Page 38: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/38.jpg)
Web Icons
37
This chapter explains the usage of Font Awesome Hand icons. Assume that custom is the
CSS class name where we defined the size and color, as shown in the example given below.
<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>
The following table shows the usage and the results of Font Awesome Hand 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="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>
4. FONT AWESOME – HAND ICONS
![Page 39: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/39.jpg)
Web Icons
38
<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>
![Page 40: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/40.jpg)
Web Icons
39
This chapter explains the usage of Font Awesome Transportation icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example
given below.
<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>
The following table shows the usage and the results of Font Awesome Transportation 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="fa fa-ambulance custom"></i>
<i class="fa fa-automobile custom"></i>
5. FONT AWESOME – TRANSPORTATION ICONS
![Page 41: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/41.jpg)
Web Icons
40
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-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>
![Page 42: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/42.jpg)
Web Icons
41
This chapter explains the usage of Font Awesome Transportation icons. Assume that
custom is the CSS class name where we defined the size and color, as shown in the example
given below.
<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>
The following table shows the usage and the results of Font Awesome Transportation 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="fa fa-ambulance custom"></i>
<i class="fa fa-automobile custom"></i>
6. FONT AWESOME – GENDER ICONS
![Page 43: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/43.jpg)
Web Icons
42
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-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>
![Page 44: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/44.jpg)
Web Icons
43
This chapter explains the usage of Font Awesome File Type icons. Assume that custom is the CSS
class name where we defined the size and color, as shown in the example given below.
<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>
The following table shows the usage and the results of Font Awesome File Type 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="fa fa-file custom"></i>
<i class="fa fa-file-archive-o custom"></i>
7. FONT AWESOME – FILE TYPE ICONS
![Page 45: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/45.jpg)
Web Icons
44
<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>
![Page 46: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/46.jpg)
Web Icons
45
<i class="fa fa-file-text-o custom"></i>
![Page 47: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/47.jpg)
Web Icons
46
This chapter explains the usage of Font Awesome Spinner icons. Assume that custom is the CSS
class name where we defined the size and color, as shown in the example given below.
<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>
The following table shows the usage and the results of Font Awesome Spinner 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="fa fa-circle-o-notch custom"></i>
<i class="fa fa-cog custom"></i>
8. FONT AWESOME – SPINNER ICONS
![Page 48: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/48.jpg)
Web Icons
47
<i class="fa fa-gear custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-spinner custom"></i>
![Page 49: Web Icons - RxJS, ggplot2, Python Data Persistence, Caffe2, … · 2019-04-21 · Web Icons 5 An icon is a symbol that is used to represent a specific action or a capability on a](https://reader030.vdocuments.mx/reader030/viewer/2022040308/5ed9a3638765f51e2e278d9f/html5/thumbnails/49.jpg)
Web Icons
48
End of ebook preview
If you liked what you saw…
Buy it from our store @ https://store.tutorialspoint.com