Definition of CSS Icon
CSS icons helps coders to use plethora of icons available in some libraries of content delivery network so that coders can use them readily (without requirement of downloading them) to make their front end UI more attractive, eye catchy and user friendly. These icons basically reduce the bare text elements in UI and increases more readability and give more eye catchy look to the end users. In this article we will study about how we can 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 plethora of icons those can be used free of cost in the HTML code using CSS to provide a good look which 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 which are present in the library.
You need to import the library with below syntax:
<link rel="stylesheet" href="<link of the libraries>">You can look out the example section how we will use libraries in different cases to use our desired icons
What are the CSS Icon?
Below are the different types icons are available in most of the 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 among them you will able to in 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 for font awesome icons.This is the easiest method to use icons in the HTML code with help of CSS. After linking the font awesome icon library in your code you need to put the required class to elements to use it upfront. No need to manually download those. Carefully look how we have imported the libraries of font awesome 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 for font awesome 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 for Google icons.This is another technique to use icons in the HTML code with help of Google icon library. After linking the Google icon library in your code you requireadding the desired class to elements to use it upfront. Manually download is not required 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 for bootstrap icons.This is the one of the popular methods to use icons. Instead of manually downloading bootstrap icons, you need to link the library in code and add the icon class from it and that is enough. Go through the code to understand how we have imported the libraries of font awesome 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 for 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. Here we have discussed plenty of examples showing many CSS icons that we often see any day to day life while interacting with webpages, smart phones etc. By implementing those techniques, you can also put different icons in your front end development UI. This will be helpful for web page designers.
Recommended Articles
This is a guide to CSS Icon. Here we also discuss the definition and what are the css icon? along with different examples and its code implementation. You may also have a look at the following articles to learn more –
9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
