Icons Tutorial







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



Icons Tutorial



❮ Home
Next ❯




























How To Add Icons


To insert an icon, add the name of the icon class to any inline HTML element.


The <i> and <span> elements are widely used to add
icons.


All the icons in the icon libraries below, are scalable vector icons that can
be customized with CSS (size, color, shadow, etc.)




Font Awesome Icons


To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:


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


Note: No downloading or installation is required!



Example



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

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>

Try It Yourself »








googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });






Bootstrap Icons


To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


Note: No downloading or installation is required!



Example



<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

Try It Yourself »



Google Icons


To use the Google icons, add the following line inside the <head> section of your HTML page:


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


Note: No downloading or installation is required!



Example



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

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

Try It Yourself »




For a complete list of ALL icons (font awesome, bootstrap and google), visit the
Icon Reference.


For a complete list of all Font Awesome icons, visit the
Font Awesome icon reference.


For a complete list of all Bootstrap Glyphicons, visit the
Bootstrap Glyphicon reference.


For a complete list of all Google icons, visit the
Google icon reference.





❮ Previous
Next ❯

Popular posts from this blog

How to check contact read email or not when send email to Individual?

Displaying single band from multi-band raster using QGIS

How many registers does an x86_64 CPU actually have?