Updated June 7, 2023
Definition of CSS Icon
CSS icons help coders use many icons available in some libraries of content delivery networks so that coders can use them readily (without downloading) to make their front-end UI more attractive, eye catchy, and user-friendly. These icons reduce the bare text elements in UI, increase readability, and give a more eye catchy look to the end users. In this article, we will study how to use CSS icons with many examples.
Syntax and Parameters
We can use many available libraries of icons in our HTML pages to use them in code with the help of CSS. Those libraries have many icons that can be used for free in the HTML code using CSS to provide a good look that will be more attractive to the end users. Once you import or link one of the libraries in your code, you are free to use any of the icons in the library.
It would be best if you imported the library with the below syntax:
<link rel="stylesheet" href="<link of the libraries>">You can look out the example section on how we will use libraries in different cases to use our desired icons
What is the CSS Icon?
Below are the different types of icons available in most cases:
- Icons from Font Awesome libraries: https://cdnjs.cloudflare.com/
- Icons from Google libraries: https://fonts.googleapis.com/
- Icons from Font Bootstrap libraries: https://maxcdn.bootstrapcdn.com/
Each of them contains plenty of icons to use; you can see them in the examples. Full list is available in those respective links.
Examples of CSS Icon
Following are the examples are given below:
Example #1
We will see some examples of awesome font icons. This is the easiest method to use icons in the HTML code with the help of CSS. After linking the font excellent icon library in your code, you need to put the required class to elements to use it upfront—no need to download those manually. Carefully look at how we have imported the libraries of awesome font icons, and then we have used some of the icons from that library in our HTML code with the help of CSS.
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>
These are examples for font awesome icons
</h1>
<li><i class="fa fa-info" style="font-size:42px;"></i> This is Info icon</li>
<li><i class="fa fa-home" style="font-size:42px;"></i> This is Home icon</li>
<li><i class="fa fa-search" style="font-size:42px;"></i> This is Search Icon</li>
<li><i class="fa fa-download" style="font-size:42px;"></i> This is Download icon</li>
<li><i class="fa fa-trash" style="font-size:42px;"></i> This is Trash Icon</li>
</body>
</html>Output:
Example #2
We will see some more examples of awesome font icons.
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>
These are another set of examples for font awesome icons
</h1>
<li><i class="fa fa-server" style="font-size:42px;"></i> This is server icon</li>
<li><i class="fa fa-volume-down" style="font-size:42px;"></i> This is volume down icon</li>
<li><i class="fa fa-volume-up" style="font-size:42px;"></i> This is volume up Icon</li>
<li><i class="fa fa-volume-off" style="font-size:42px;"></i> This is volume off icon</li>
<li><i class="fa fa-file-archive-o" style="font-size:42px;"></i> This is file archive icon</li>
</body>
</html>Output:
Example #3
We will see some examples of Google icons. This is another technique to use icons in the HTML code with the help of Google icon library. After linking the Google icon library in your code, you require adding the desired class to elements to use it upfront. Manually downloading is not needed here. Observe how we have imported the libraries of Google icons, and then we have used some of the icons from that library with the help of CSS in our HTML code.
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>
These are some examples of Google icons
</h1>
<li><i class="material-icons" style="font-size:42px;">attach_file</i> This is Info icon for attaching files</li>
<li><i class="material-icons" style="font-size:42px;">backspace</i> This is backspace icon</li>
<li><i class="material-icons" style="font-size:42px;">bluetooth</i> This is Bluetooth Icon</li>
<li><i class="material-icons" style="font-size:42px;">content_copy</i> This is Content copy icon</li>
<li><i class="material-icons" style="font-size:42px;">content_paste</i> This is Content paste Icon</li>
</body>
</html>Output:
Example #4
We will see some more examples for google icons.
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>
These are another set of examples for Google icons
</h1>
<li><i class="material-icons" style="font-size:42px;">file_download</i> This is file download icon </li>
<li><i class="material-icons" style="font-size:42px;">file_upload</i> This is file upload icon </li>
<li><i class="material-icons" style="font-size:42px;">delete</i> This is delete icon</li>
<li><i class="material-icons" style="font-size:42px;">wifi</i> This is wifi Icon</li>
<li><i class="material-icons" style="font-size:42px;">email</i> This is email icon</li>
<li><i class="material-icons" style="font-size:42px;">drafts</i> This is draft icon</li>
</body>
</html>Output:
Example #5
We will see some examples of bootstrap icons. This is one of the popular methods to use icons. Instead of manually downloading bootstrap icons, you need to link the library in the code and add the icon class, which is enough. Please go through the code to understand how we have imported the libraries of awesome font icons, and then we have used some of the icons from that library in our HTML code with the help of CSS.
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>
These are some examples of bootstrap icons
</h1>
<li><i class="glyphicon glyphicon-volume-up" style="font-size:42px;"></i> This is volume up icon</li>
<li><i class="glyphicon glyphicon-volume-down" style="font-size:42px;"></i> This is volume down icon</li>
<li><i class="glyphicon glyphicon-file" style="font-size:42px;"></i> This is File Icon</li>
<li><i class="glyphicon glyphicon-zoom-out" style="font-size:42px;"></i> This is Zoom out icon</li>
<li><i class="glyphicon glyphicon-zoom-in" style="font-size:42px;"></i> This is Zoom in Icon</li>
</body>
</html>Output:
Example #6
We will see some more examples of bootstrap icons.
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>
These are another set of examples for bootstrap icons
</h1>
<li><i class="glyphicon glyphicon-backward" style="font-size:42px;"></i> This is forward icon</li>
<li><i class="glyphicon glyphicon-forward" style="font-size:42px;"></i> This is backward icon</li>
<li><i class="glyphicon glyphicon-pause" style="font-size:42px;"></i> This is pause icon</li>
<li><i class="glyphicon glyphicon-warning-sign" style="font-size:42px;"></i> This is warning icon</li>
<li><i class="glyphicon glyphicon-shopping-cart" style="font-size:42px;"></i> This is cart icon</li>
</body>
</html>Output:
Conclusion
This topic ends here. We have discussed plenty of examples showing many CSS icons we often see daily while interacting with webpages, smartphones, etc. You can also put different icons in your front-end development UI by implementing those techniques. This will be helpful for web page designers.
Recommended Articles
We hope that this EDUCBA information on “CSS Icon” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
