how to add icon in html code example

Example 1: html set icon

<link rel="icon" href="http://example.com/favicon.png">

Example 2: how to add an icon to your html website

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

Example 3: html add icon to page

...
<title> Website </title>
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/>
...

Example 4: how to icon button in html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}
</style>
</head>
<body>

<h2>Icon Buttons</h2>
<p>Icon buttons:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>

<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

</body>
</html>

Example 5: how to add icons in html

<html>
<head>

     <script src="https://kit.fontawesome.com/yourcode.js"></script>

   <!--Get your code at fontawesome.com-->
</head>
<body>

Tags:

Misc Example

Recent Posts