How To Use Font Awesome Icons In HTML

How To Use Font Awesome Icons In HTML

Font Awesome icons is a great way to show icons in your html page. It's easy, fast and free. Yeah! It's free. Who doesn't like free stuff, eh? Here, I am going to show how to install and use font-awesome in your html page. But, just before that, you might wanna ask- 

(Disclaimer- This post contains affiliate links.)

What is Font Awesome?

Let us first see what font-awesome actually is,

Font Awesome is a single collection of 675 scalable vector graphics that can be manipulated in size, color and almost anything that can be done for any font with CSS. In simple words, they look like icons, but you can handle them as fonts. 

There are two ways you can integrate font-awesome in your html - 

1.    Font Awesome Link (CDN)
2.    Download & Install

Font Awesome Link (CDN):

This is the easiest way to get font-awesome with just one line of code in your html page <head> tag. No downloading, installing or configuration required in this case. Just one line of code and you are good to go -

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

The example below shows how to use this code in your html page - 

<!Doctype html>
<html>
	<head>
		<title>Font Awesome Example</title>
        <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-futboll-0"></i>
		<i class=" fa fa-futboll-0" style="font-size:50px;"></i>
		<i class=" fa fa-futboll-0" style="font-size:60px; color:red;"></i>
	</body>
</html>

Download & Install

It’s not always better to use a CDN link in your project as it only works if your device connected to the internet for example, in production mode. But in case of development mode if you want to work with font awesome icons even without any internet connection, you can download and unzip the font awesome package into your project directory and add this code inside <head> tag-

<link rel="stylesheet" href="myProjectPath/font-awesome/css/font-awesome.min.css">

This example shows how to use this code in your html page - 

<!Doctype html>
<html>
	<head>
		<title>Font Awesome Example</title>
		<link rel="stylesheet" href="myProjectPath/font-awesome/css/font-awesome.min.css">
	</head>
	<body>
		<i class="fa fa-futboll-0"></i>
		<i class=" fa fa-futboll-0" style="font-size:50px;"></i>
		<i class=" fa fa-futboll-0" style="font-size:60px; color:red;"></i>
	</body>
</html>

How to use Font Awesome?

For now we know how integrate font-awesome in our project. Let us now see with some examples how to use it- 

Larger Icons:

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Example – Larger Icons</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
		* {
			font-family:monospace, sans-serif;
		}
		
		table, td, th {    
			border: 1px solid #ddd;
			text-align: left;
		}

		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			padding: 15px;
		}
		</style>
	</head>
	<body>
		<h1>Font Awesome Example – Larger Icons</h1>
		<table>
			<tr>
				<th>Icon</th>
				<th>Code</th>
			</tr>
			<tr>
				<td><i class="fa fa-briefcase "></i></td>
				<td>&lt;i class=&quot;fa fa-briefcase &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-briefcase fa-2x "></i></td>
				<td>&lt;i class=&quot;fa fa-briefcase fa-2x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-briefcase fa-3x "></i></td>
				<td>&lt;i class=&quot;fa fa-briefcase fa-3x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-briefcase fa-4x "></i></td>
				<td>&lt;i class=&quot;fa fa-briefcase fa-4x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-briefcase fa-5x "></i></td>
				<td>&lt;i class=&quot;fa fa-briefcase fa-6x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			
		</table>
	</body>
</html>

Result : 

font-awesome-example-larger-icons

List Icons :

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Example – List Icons</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
		* {
			font-family:monospace, sans-serif;
		}
		
		table, td, th {    
			border: 1px solid #ddd;
			text-align: left;
		}

		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			padding: 15px;
		}
		</style>
	</head>
	<body>
		<h1>Font Awesome Example – List Icons</h1>
		<table>
			<tr>
				<th>Icon List</th>
				<th>Code</th>
			</tr>
			<tr>
				<td>
					<ul class="fa-ul">
						<li><i class="fa-li fa fa-check-square"></i> List Item 1 </li>
						<li><i class="fa-li fa fa-check-square-o "></i> List Item 2 </li>
						<li><i class="fa-li fa fa-square-o"></i> List Item 3 </li>
					</ul>
				</td>
				<td>
					<pre>&lt;ul class=&quot;fa-ul&quot;&gt;
						&lt;li&gt;&lt;i class=&quot;fa-li fa fa-check-square&quot;&gt;&lt;/i&gt; List Item 1 &lt;/li&gt;
						&lt;li&gt;&lt;i class=&quot;fa-li fa fa-check-square-o &quot;&gt;&lt;/i&gt; List Item 2 &lt;/li&gt;
						&lt;li&gt;&lt;i class=&quot;fa-li fa fa-square-o&quot;&gt;&lt;/i&gt; List Item 3 &lt;/li&gt;
					&lt;/ul&gt;
					</pre>
				</td>
			</tr>
		</table>
	</body>
</html>

Result:

font-awesome-example-list-icons

Loaders / Spinners Icons:

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Example – Loaders / Spinners  Icons</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
		* {
			font-family:monospace, sans-serif;
		}
		
		table, td, th {    
			border: 1px solid #ddd;
			text-align: left;
		}

		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			padding: 15px;
		}
		</style>
	</head>
	<body>
		<h1>Font Awesome Example – Loaders / Spinners  Icons</h1>
		<table>
			<tr>
				<th>Icon Spinners</th>
				<th>Code</th>
			</tr>
			<tr>
				<td><i class="fa fa-spinner fa-spin fa-2x"></i></td>
				<td>&lt;i class=&quot;fa fa-spinner fa-spin fa-2x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-circle-o-notch fa-spin fa-2x "></i></td>
				<td>&lt;i class=&quot;fa fa-circle-o-notch fa-spin fa-2x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-refresh fa-spin fa-2x "></i></td>
				<td>&lt;i class=&quot;fa fa-refresh fa-spin fa-2x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-cog fa-spin fa-2x "></i></td>
				<td>&lt;i class=&quot;fa fa-cog fa-spin fa-2x &quot;&gt;&lt;/i&gt;</td>
			</tr>
			
		</table>
	</body>
</html>

Result :

font-awesome-example-loaders-spinners-icons

Color Icons :

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Example – Color Icons</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
		* {
			font-family:monospace, sans-serif;
		}
		
		table, td, th {    
			border: 1px solid #ddd;
			text-align: left;
		}

		table {
			border-collapse: collapse;
			width: 100%;
		}

		th, td {
			padding: 15px;
		}
		</style>
	</head>
	<body>
		<h1>Font Awesome Example – Color Icons</h1>
		<table>
			<tr>
				<th>Icon</th>
				<th>Code</th>
			</tr>
			<tr>
				<td><i class="fa fa-gamepad fa-3x" style="color:green" ></i></td>
				<td>&lt;i class=&quot;fa fa-gamepad fa-3x &quot;&gt; style=&quot;color:green&quot; &lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-heartbeat fa-3x " style="color:red" ></i></td>
				<td>&lt;i class=&quot;fa fa-heartbeat fa-3x &quot;&gt; style=&quot;color:red&quot; &lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-fire fa-3x " style="color:orange" ></i></td>
				<td>&lt;i class=&quot;fa fa-fire fa-3x &quot;&gt; style=&quot;color:orange&quot; &lt;/i&gt;</td>
			</tr>
			<tr>
				<td><i class="fa fa-gift fa-3x " style="color:blue" ></i></td>
				<td>&lt;i class=&quot;fa fa-gamepad fa-3x &quot;&gt; style=&quot;color:blue&quot; &lt;/i&gt;</td>
			</tr>
		</table>
	</body>
</html>

Result :

font-awesome-example-color-icons

Buttons with only icon :

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Example – Buttons with only icon</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
		* {
			font-family:monospace, sans-serif;
		}
		
		table, td, th {    
			border: 1px solid #ddd;
			text-align: left;
		}
		
		table {
			border-collapse: collapse;
			width: 100%;
		}
		
		th, td {
			padding: 15px;
		}
		
		.custom-button {
			padding: 5px 7px;
			color: white;
			background: #FF7043;
			float:left;
			margin:2px;
			border:0;
		}
		</style>
	</head>
	<body>
		<h1>Font Awesome Example – Buttons with only icon</h1>
		<table>
			<tr>
				<th>Buttons with only icon</th>
				<th>Code</th>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i></button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-sign-in&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/button&gt;</td>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i></button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-sign-out&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/button&gt;</td>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i></button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-remove&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/button&gt;</td>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i></button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-share&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;/button&gt;</td>
			</tr>
		</table>
	</body>
</html>	

Result : 

font-awesome-example-buttons-with-only-icon

Buttons with icon and text:

<!DOCTYPE html>
<html>
	<head>
		<title>Font Awesome Example – Buttons with icon and text</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<style>
		* {
			font-family:monospace, sans-serif;
		}
		
		table, td, th {    
			border: 1px solid #ddd;
			text-align: left;
		}
		
		table {
			border-collapse: collapse;
			width: 100%;
		}
		
		th, td {
			padding: 15px;
		}
		
		.custom-button {
			padding: 5px 7px;
			color: white;
			background: #FF7043;
			float:left;
			margin:2px;
			border:0;
		}
		</style>
	</head>
	<body>
		<h1>Font Awesome Example – Buttons with icon and text</h1>
		<table>
			<tr>
				<th>Button with icon & text</th>
				<th>Code</th>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-sign-in" aria-hidden="true"></i> Login</button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-sign-in&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Login&lt;/button&gt;</td>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-sign-out&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Logout&lt;/button&gt;</td>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-remove" aria-hidden="true"></i> Remove</button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-remove&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Remove&lt;/button&gt;</td>
			</tr>
			<tr>
				<td><button class="custom-button" ><i class="fa fa-share" aria-hidden="true"></i> Share</button></td>
				<td>&lt;button class=&quot;custom-button&quot; &gt;&lt;i class=&quot;fa fa-share&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt; Share&lt;/button&gt;</td>
			</tr>
		</table>
	</body>
</html>	

Result : 

font-awesome-example-buttons-with-icon-and-text

So, with all the examples above, you can see how easy is to install and use font-awesome in your html.

Font Awesome Alternative

When it comes to vector icons, font awesome is best. But still it has it's limits. You might not find the icon you are looking for in the collection of 675 icons. Also, sometimes you need some custom designed icons for your website because beautiful icons can make your website more beautiful.

The best font awesome alternative is the world's most popular icon site iconfinder.com. The name itself tells the whole story, but still, here are some highlights- 

  • Thousands of high-quality icons [Free & Premium] to choose with amazing searching feature.
  • Each icon in multiple sizes: 16 x 16,   20 x 20,    24 x 24,    32 x 32,    48 x 48,    64 x 64,    128, 128, 256 x 256,    512 x 512.
  • Each icon in multiple format: SVG (vector), PNG, ICO, ICNS, Adobe Illustrator.
  • More than 1800+ designers to get customized icons based on your specific need.
  • Trusted by the world's top companies: DROPBOX, AMAZON, NETFLIX, SAMSUNG

If you are interested in iconfinder pro, you can subscribe to it by clicking here. If you want to play around with font-awesome icons you can see the complete list of font-awesome icons here.


About  |  Privacy Policy  |  Disclaimer  |  © Copyright 2018. All Rights Reserved.