Icons are small images, typically less than 30 pixels square.
They provide visual cues that help communicate concepts on webpages.
An icon can be an image, but they can also be characters in a font-file.
A telephone icon that comes from a font file.
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<i class="fa fa-phone"></i>
Icons can be added with the <img> tag and a small image file.
Or, you can use an icon library, such as Font Awesome.
Simply add the icon's class name to an inline element, such as, <i> or <span>.
Icons from icon libraries are fully customizable with CSS (size, color, shadow, etc.)
To use Font Awesome icons, add the following line to your page's <head> section:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
Then select icons using fa fa-*
classes. Below are some icons.
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<style>
.icon-wrapper { text-align: left; }
.icon-wrapper > i { margin: 0 5px; }
</style>
<div class="icon-wrapper">
<i class="fa fa-check"></i>
<i class="fa fa-times"></i>
<i class="fa fa-plus"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-heart"></i>
</div>
To use the Bootstrap icons, add the following line to your page's <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
Bootstrap icons can be included in SVG, SVG sprite, or web font format.
As web fonts use the correct bi bi-*
class names. Below are some examples -- as web font and svg images.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<style>
.icon-wrapper { text-align: left; }
.icon-wrapper > i { margin: 0 5px; }
</style>
<div class="icon-wrapper">
<!-- use as web font-->
<i class="bi bi-arrow-left"></i>
<i class="bi bi-arrow-right"></i>
<!-- use as SVG-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" />
</svg>
</div>
To use the Google icons, add the following line to your page's <head> section:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Google icons utilizes the material design icons.
Include them by using a material-icons
class name and the icon name as the content.
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.icon-wrapper { text-align: left; }
.icon-wrapper > i { margin: 0 5px; }
</style>
<div class="icon-wrapper">
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">save</i>
<i class="material-icons">battery_full</i>
<i class="material-icons">network_wifi</i>
</div>