19 Dec CSS Icons
We all love icons and definitely want to add them to our website. Various icon libraries are available, which allow you to add icons. In the article, we will learn about CSS Icons.
Here are the scalable vectors, which are the icons that can be customized with CSS,
- Font Awesome Icons
- Google Icons
- Bootstrap Icons
Before implementing the above icons, let us see how to easily add icons to HTML.
How to add icons to an HTML page
To add icons to your HTML page, there is no need to download and install any file. Get the icon library, by adding the following line to <head>:
|
1 2 3 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
Here’s the code, which you can use to add icons to your HTML page,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Understanding Icons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h2>Icons</h2> <i class="fa fa-car"></i> <i class="fa fa-bars"></i> <p>You can also style the icons with CSS:</p> <i class="fa fa-car" style="font-size:40px;"></i> </body> </html> |
Here’s the output,
Let’s now understand Font Awesome and Google Icons.
What are Font Awesome Icons
Font Awesome provides font and icons toolkit. Here are some of the icons from a library of icons provided by Font Awesome,
Image credit: Screenshot from fontawesome.io
To add icons to your HTML web page, there is no need to download and install any file. Add the following line in <head> to add font awesome icons,
|
1 2 3 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> |
After that, you need to add the name of the specified icon class to the HTML element <i> or <span>,
|
1 2 3 4 |
<i class="fa fa-motorcycle"></i> <i class="fa fa-quora"></i> |
The following is an example to add icons and style them:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <title>Understanding Font Awesome Icons</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <h2>Icons</h2> <i class="fa fa-firefox"></i> <i class="fa fa-dropbox"></i> <i class="fa fa-cc-visa"></i> <i class="fa fa-hand-o-right"></i> <i class="fa fa-cc"></i> <h2>Styled Icon</h2> <i class="fa fa-firefox" style="font-size:40px;"></i> <i class="fa fa-dropbox" style="font-size:40px;color: blue"></i> <i class="fa fa-blind" style="font-size:40px;"></i> <i class="fa fa-facebook" style="font-size:40px;color: blue"></i> <i class="fa fa-cc-visa" style="font-size:40px;color: blue"></i> <i class="fa fa-coffee" style="font-size:40px;color: red"></i> <i class="fa fa-bar-chart" style="font-size:40px;"></i> <i class="fa fa-youtube" style="font-size:40px;color: black"></i> </body> </html> |
Here’s the output,
Let us learn about Google Icons.
What are Google Icons
Google Icons provides over 900 material system icons, which are available for users in different sizes and as web fonts. Here are some of the icons from a library of icons provided by Google Material Icons,
Image credit: Screenshot from material.io/icons
To add icons to your HTML page, there is no need to download and install any file. Add the following line in <head> to add the Google icon,
|
1 2 3 |
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> |
After that, you need to add the material-icons class to the HTML element <i> or <span>,
|
1 2 3 4 |
<i class="material-icons">info</i> <i class="material-icons">create</i> |
The following is an example to add Google icons and style theme:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <title>Understanding Google Material Icons</title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <h2>Icons</h2> <i class="material-icons">info</i> <i class="material-icons">create</i> <i class="material-icons">inbox</i> <i class="material-icons">brush</i> <i class="material-icons">folder</i> <h2>Styled Icons</h2> <i class="material-icons" style="font-size:50px;color:red;">airport_shuttle</i> <i class="material-icons" style="font-size:50px;color: blue">notifications</i> <i class="material-icons" style="font-size:50px;">local_dining</i> <i class="material-icons" style="font-size:50px;color: blue">place</i> <i class="material-icons" style="font-size:50px;color: green">local_car_wash</i> <i class="material-icons" style="font-size:50px;color: red"></i> <i class="material-icons" style="font-size:50px;">check</i> <i class="material-icons" style="font-size:50px;color: orange">star_half</i> </body> </html> |
Here’s the output,
In the above example, we saw how to add icons to an HTML web page with examples.
No Comments