【HTML】Adding and Displaying Icons | Using FontAwesome and Material Icons

This article explains how to display icons and special characters in HTML using FontAwesome and Material Icons.

🔹 Partial Code

<span class="fa fa-camera"></span> Take a photo

💻 Full Working Code (This copy-paste code works in HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Icon Display</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <span class="fa fa-camera"></span> Take a photo
</body>
</html>

📚 Icon Fonts: Mechanism and Practical Uses

The method of displaying icons using the element is widely adopted in modern web development. A simple code like  allows you to display a rich set of icons.

Core of Icon Fonts

FontAwesome and Material Icons use a technology called "Icon Fonts." This means each icon is treated as a character of a special font. It works by specifying a particular font-family using the font-family property. In some cases, the ::before pseudo-element and content property in CSS are also used for rendering.

Practical Application in Projects

In navigation menus, you can use something like  Home. Also, by adding send to a button, you can easily embed a send icon. For responsive design, setting the font-size in % or vw units will allow the icon to scale nicely with screen size.

Note that using  tags is less common today, and is the preferred choice for displaying icons. When using CDNs to load icons, a network connection is required. For offline use, you should download the files locally.

To achieve a consistent UI in a project, it's recommended to set icon sizes using rem units and manage colors with CSS variables. For example, you can define it like this: .icon { font-size: 1.2rem; color: var(--primary-color); } to easily apply changes to all icons.

Copied!