CSS Icons
CSS Icon with Programming Examples-
CSS Icon
In this tutorial we will learn CSS Icon, here we learn how to insert icon in our HTML document and webpages, which will make our webpages look good.
And we will also see programming examples of CSS Icon, in this CSS Tutorial.
We use Icon in HTML document to looking good and fantastic webpages. Some basic Icon are mostly used in HTML webpages and websites like home icon, contact icon, social media icon etc. some popular icons are most used in webpages.
How we add Icon
We can add icon to our HTML webpages by using some popular online (internet connection is necessary) icon libraries such as Bootstrap Icon, Font Awesome and Material Icon by google it all are trusted Icon libraries and you can easily insert the icon from this all libraries. Below we define all these three Icon Libraries and programming examples also. So, start learning and enjoy it.
To add Icon, we should simply use HTML inline element, and it is work on inline element like <i> and <span>.
Bootstrap Icon
Bootstrap Icon is an Icon library, where we take icons and insert them on our HTML webpages. To use Bootstrap Icon, we need to include the library to our HTML Pages, using the <link> tag with href attribute containing the <url> of the library we also say this Bootstrap CDN Link.
- This is the Bootstrap CND Link you can copy this link and insert in your own HTML project. (<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” />).
To insert the Icon don’t forget to Insert this link inside the <head> element.
Programming Example of Bootstrap Icon;
<!DOCTYPE html> <html> <head> <title>Bootstrap Icon Example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.7/css/bootstrap.min.css"/> <style type="text/css"> body, html{ padding: 10px; text-align: center; } i.glyphicon{ font-size: 60px; color:orangered;} span.glyphicon{ font-size: 50px; color: blueviolet; } </style> </head> <body> <i class="glyphicon glyphicon-apple"></i> <i class="glyphicon glyphicon-bitcoin"></i> <i class="glyphicon glyphicon-camera"></i> <i class="glyphicon glyphicon-education"> </i> <i class="glyphicon glyphicon-queen"></i> <br><br> <span class="glyphicon glyphicon- hd-video"></span> <span class="glyphicon glyphicon-upload"> </span> <span class="glyphicon glyphicon-phone"> </span> <span class="glyphicon glyphicon- piggy-bank"></span> <span class="glyphicon glyphicon-home"> </span> </body> </html> |
Output of programming example of Icons;
 |
You can see the output of programming example, these all are the CSS Icon here we change this color; you can also change these properties like color, size and background.
Visit Bootstrap Icon Library & find all Icons here: Bootstrap Icon Library
Font Awesome Icon
To use the Font Awesome Icon in our HTML document we need to include the Font Awesome Library to our HTML Pages using the <link> tag with its href attribute containing the <url> of the library, the link tag should be inside in the <head> element.
- This is the Font Awesome CND Link you can copy this link and insert in your own HTML project. (<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css” />).
Example of Font Awesome Icon;
<!DOCTYPE html>
<html>
<head>
<title>Awesome Font Example</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax
/libs/font-awesome/4.7.0/css/
font-awesome.css" />
<style type="text/css">
i.fa{
font-size: 50px;
color: green;}
</style>
</head>
<body>
<div>
<i class="fa fa-search"></i>
<i class="fa fa-send"></i>
<i class="fa fa-address-card"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-female"></i>
<i class="fa fa-magic"></i>
<i class="fa fa-male"></i>
<i class="fa fa-qrcode"></i>
<i class="fa fa-bank"></i>
</div>
</body>
</html>
|
Output of above programming examples;
 |
Above you can see the output of above programming example, here we used the Font Awesome Icon, we change the color and size of icon.
Visit Awesome Icon Library & find all Icons here: Awesome Icon Library
Material Icon
To use the material icon, we need to include the library to the HTML page, using the <link> tag with its href attribute containing the <url> of the library.
The icon CND link should be insert inside the <head> element.
- This is the Material Icon CND Link you can copy this link and insert in your own HTML project. (<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons” />).
Example of Material Icon;
<!DOCTYPE html>
<html>
<head>
<title>Material Icons Example</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/
icon?family=Material+Icons"/>
<style type="text/css">
body, html{
padding: 10px;
text-align: center;
}
i.material-icons{
font-size: 60px;
color:blue;}
span.material-icons{
font-size: 50px;
color:fuchsia;
}
</style>
</head>
<body>
<i class="material-icons">face</i>
<i class="material-icons">shopping_cart
</i>
<i class="material-icons">fingerprint</i>
<i class="material-icons">verified</i>
<i class="material-icons">paid</i><br><br>
<span class="material-icons">
admin_panel_settings</span>
<span class="material-icons">view_list
</span>
<span class="material-icons">pan_tool
</span>
<span class="material-icons">https
</span>
<span class="material-icons">backup
</span>
</body>
</html>
|
Output of above programming example;
 |
Above you can see the output of programming example, here we put the different Icon, lots of icons are available on this Icon library, simply you can visit and insert the icon.
Visit Material Icon Library & find all Icons here: Material Icon Library
In this tutorial you learned the all CSS Icon, these three icon libraries are (Material IconIcons, Font Awesome Icon and Bootstrap) and also see the programming examples of all the Icon Libraries. I hope you all read this and learn something from this CSS Icon Tutorial. If you have any doubt, you can ask in the comment section.
Read Also-
- Learn All Tutorial of HTML with programming Examples.
- Learn CSS Font (Font Family, Font Size, Font Weight, Font Style, Font Variant) Full Tutorial with programming Examples.
- Learn CSS Box Models with examples.
- Learn What is Internet? Is internet really Free, but how?
- Learn HTML Table Tag with programming Examples.
- Learn, how to create CSS Circle Ring Animation.
4 Comments
zoritoler imol · July 1, 2022 at 12:32 am
Hey! This is my first visit to your blog! We are a group of volunteers and starting a new project in a community in the same niche. Your blog provided us beneficial information to work on. You have done a outstanding job!
bokep viralokep viral · March 18, 2023 at 10:00 pm
Someone essentially help to make seriously posts I would state. This is the first time I frequented your web page and thus far? I surprised with the research you made to create this particular publish incredible. Great job!
bestweighingscale.in · May 26, 2023 at 4:14 am
I am in fact grateful to the holder of this website who has shared this wonderful article
at here.
king of cricket · June 16, 2023 at 7:13 pm
This is a really good tip particularly to those fresh to
the blogosphere. Brief but very precise info… Many thanks for sharing
this one. A must read post!