Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS41 - CSS Icons

In the last article, we learned about fonts in CSS and see how to implement it in your web pages to make it more versatile. Now moving forward, in today's article we are going to see about Icons in CSS.
Let's begin...

Where will I get Icons?

Best and easiest way to get icons on our HTML pages is to use Icon libraries which contains thousands of icons. Some of the famous icon libraries are as follows:
  • Flaticons
  • Icons8
  • Font Awesome
  • Google Icons
  • Bootstrap Icons
We are going to use Font Awesome in our articles as they are free and literally there is the icon for most of your needs.
Let's see how to use them...

Font Awesome Icons

To use Font Awesome icons, we first have to add the following link inside the section of our HTML page:
This will directly load icons on your web page and you don't need to install anything.
The syntax for each icon is available on the website. Here are the few examples:

There are several other icons you can use in your web pages. Following are some more icons:

Google Icons

URL to add:
Examples:
alarm
check_circle
home
See other icons here: Google Icons

That's all for today. In the next part, we will learn about how you can decorate and customise links using CSS.
Till the #keepCoding.





This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS41 - CSS Icons

×

Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription

×