CSS Icons

Using CSS Icon Inside Web Page

CSS icons can be added inside any HTML web page easily by placing CDN link inside <head> section of the project. This CDN link is provided by different icon providers namely font awesome, google icon, bootstrap icon, etc.

Font Awesome Icons

Font Awesome icon can be easily used inside any project. Basically, just go to font awesome official site and sign in & get a code and then add it in the head section of the HTML page.


Example

The CSS icon can be inserted inside the project very easily. Followings are the popular icon provider like google icon, bootstrap icon & font-awesome.

example

Source Code

Try it now

Code Explanation

Note:To insert font awesome inside the project, you have to place a font-awesome js script inside the <head> section of the web page.

Bootstrap Icons

To add a bootstrap icon, add the following cdn link inside <head> the section of the HTML page.

To use the Bootstrap glyphicons, add the following line inside the section of your HTML page:

Source Code

Try it now

Code Explanation

To use bootstrap glyphicon, place the bootstrap glyphicon CDN link inside the <head> section of the web page.

Google Icons

Add google icon cdn link inside <head> section of the HTML page.


General Syntax

Try it now

Source Code

Try it now

Code Explanation

Note:In this example,google icon cdn link is placed inside the <head> section.

Online Test / Quiz