CSS Icons

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

How To Add Icons

Icon library is used to add an icon to the HTML page, such as Font Awesome.

The name of the specified icon is also added in class to any inline HTML element.

The icon libraries consisting of icons as mentioned below, are scalable vectors that can be customized with CSS.

Font Awesome Icons

To add the font Awesome icons, go to fontawesome.com, sign in, and use the code to add in the <head> section of your HTML page:

<script src=”https://kit.fontawesome.com/yourcode.js” crossorigin=”anonymous”></script>

				
					<h1>Font Awesome icon library</h1>
<p>Some Font Awesome icons:</p>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<p>Styled Font Awesome icons (size and color):</p>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>
<i class="fas fa-cloud" style="font-size:48px;color:blue;"></i>
<i class="fas fa-cloud" style="font-size:60px;color:lightblue;"></i>

Output