HTML and CSS

List with a Font Awesome icon

Best selling cars of all time

  • Toyota Corolla – Over 50 million sold
  • Volkswagen Golf – Over 35 million sold
  • Volkswagen Passat – over 28 million sold
  • Honda Civic – Over 24 million sold

What is Font Awesome?

Font Awesome is a popular icon set and toolkit used by web developers to add scalable vector icons to websites and web applications. These icons can be customized with CSS for color, size, and other properties, making them highly flexible and adaptable to different design needs.

Font Awesome includes both free and paid icons, with the free version offering a large collection of icons for basic use. These icons cover a wide range of categories such as social media logos, user interface elements (like arrows and buttons), and other commonly used symbols.

The icons are available in different formats like SVGs, web fonts, and other scalable formats, making them easy to use in a variety of web projects. Font Awesome is widely used because of its ease of implementation, vast icon library, and the ability to scale and customize icons without losing quality.

You can include Font Awesome in your projects by downloading it to host locally or by adding a link to a CDN:

Link to the Fontawesome CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
HTML (demo)
<div class="demo-container">
<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
</ul> 
</div>
CSS
.demo-container li {
  position: relative; 
  list-style: none;
  padding-left: 30px;
} 
.demo-container li::before {
  position: absolute;
  font-family: 'FontAwesome';
  content: "\f138";
  left: 0;
}