Home
Resources | Scripts | Themes | Tutorials | Web Hosting | Marketplaces | Affiliate Programs | Top Lists | More | Services | E-Commerce | Jobs

CSS Icons

By SamK
0
0 recommends
Category(s)
Web Design
Web Development
Topic(s)
CSS

Icons in CSS refer to small graphical representations or symbols used in web design to visually communicate various actions, statuses, or pieces of information.

CSS Icons Demo

How To Add Icons

The easiest way to incorporate icons into your HTML page is by utilizing an icon library like Font Awesome. Simply include the desired icon class within an inline HTML element such as <i> or <span>.

Font Awesome Icons

Font Awesome is a popular icon set and toolkit that provides scalable vector icons that can be easily customized. These icons are widely used in web development and design due to their versatility and ease of use.

To use the Font Awesome icons:

  • Go to fontawesome.com
  • Create an account or sign in to an existing account
  • Get a code to add in the <head> section of your HTML page, as you can see below.
<head>
<script src="https://kit.fontawesome.com/24d0f43e41.js" crossorigin="anonymous"></script>
</head>
  • Then use the fas class as a base class and an additional icon specific class in an i html element to display the icons, as you can see below.
<body>
<i class="fas fa-home" style="font-size: 36px;color: grey;"></i> 
<i class="fas fa-user" style="font-size: 36px;color: red;"></i>
<i class="fas fa-search" style="font-size:36px;color: green;"></i> 
<i class="fas fa-shopping-cart" style="font-size: 36px;color: skyblue;"></i>
</body>

The preview for the above code will look like this:

 Font Awesome Icons

Bootstrap Icons

Bootstrap Icons is an open-source icon library created by the Bootstrap team. It's easy to use with or without Bootstrap and provides a wide range of icons that you can incorporate into your web projects.

To use the Bootstrap icons:

  • First, you need to include the Bootstrap Icons CSS file in your HTML. You can do this by adding a link to the Bootstrap Icons CDN in the <head> section of your HTML document.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.9.1/font/bootstrap-icons.min.css">
</head>
  • Then use the bi class as a base class and an additional icon specific class in an i html element to display the icons, as you can see below.
<body>
<i class="bi bi-house" style="font-size: 36px;color: grey;"></i>
<i class="bi bi-alarm" style="font-size: 36px;color: green;"></i>
<i class="bi bi-heart" style="font-size: 36px;color: red;"></i>
<i class="bi bi-calendar" style="font-size: 36px;color: skyblue;"></i>
</body>

The preview for the above code will look like this:

Bootstrap Icons Demo

Google Icons

Google Icons, also known as Material Icons, are a set of icons created and maintained by Google. They are designed based on Google's Material Design principles and are widely used in web and mobile applications.

To use the Google icons:

  • Include the Google Icons CSS file in the <head> section of your HTML document. You can do this by adding a link to the Google Icons CDN.
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
  • Then use the material-icons class as a base class and the icon name in the content of an i HTML element, as you can see below.
<body>
<i class="material-icons" style="font-size: 36px;color: grey;">home</i>
<i class="material-icons" style="font-size: 36px;color: skyblue;">person</i>
<i class="material-icons" style="font-size: 36px;color: lightgray;">search</i>
<i class="material-icons" style="font-size: 36px;color: green;">shopping_cart</i>
<i class="material-icons" style="font-size: 36px;color:blue;" >facebook</i>
<i class="material-icons" style="font-size: 36px;color: silver;">attachment</i>
</body>

The preview for the above code will look like this:

Google Icons Demo

Please check below options for the links to our previous or next tutorial.

Questions & Answers