Till now you can used images for icons. But now you can use fonts as an icon in your website. Many of fonts are in trending now which we can use for icons. These font icons are scaleable vector that you can customize with your need, like - size, shadow, color etc. The <i> and <span> element are widely used to add icons. To use these icons, add the name of icon class in any one of above two elements.
Font Awesome Icons
To use the Font Awesome icons, add the css file cdn link inside the <head> section of your page. (please create your own cdn with your email id because Font Awesome create new embed codes for each website.) Otherwise download the font-awesome folder and css file inside the <head> section of your page and add the font file in your fonts folder.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome icons</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
<span class="fa fa-user"></span>
<span class="fa fa-key"></span>
<span class="fa fa-plus"></span>
<span class="fa fa-map-marker"></span>
</body>
</html>
for more detailed information go to this link: http://fontawesome.io/get-started/
Bootstrap Glyph Icons
To use the Bootstrap glyph icons, add the bootstrap.min.css file inside the <head> section of out web page and add font files in your fonts folder.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap glyph icons</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<span class="glyphicon glyphicon-align-left"></span>
<span class="glyphicon glyphicon-align-right"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-exclamation-sign"></span>
</body>
</html>
for more detailed information go to this link: http://getbootstrap.com/components/#glyphicons-how-to-use
Google Material Icons
To use google material icons, you have two methods.
Method 1: Simply add google material icons library cdn link in <head> section of your page.
<!DOCTYPE html>
<html>
<head>
<title>Google Material icons</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<span class="material-icons">face</span>
<span class="material-icons">lock</span>
<span class="material-icons">label</span>
<span class="material-icons">list</span>
</body>
</html>
Method 2: Add below font-face rule inside your css stylesheet-
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
After add font-face rule add css stylesheet inside your page <head> section and use the icons in HTML.
<!DOCTYPE html>
<html>
<head>
<title>Google Material icons</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<span class="material-icons">face</span>
<span class="material-icons">lock</span>
<span class="material-icons">label</span>
<span class="material-icons">list</span>
</body>
</html>
for more detailed information go to this link: http://google.github.io/material-design-icons/#icon-font-for-the-web
