saftutorials.com
CSS Icons

CSS Icons can display iconic web content. It's very useful for a website. It makes a better website from a normal website. There are many types icon like  Google Icon, Font Awesome Icons, Bootstrap Icon etc

By this tutorials, you can learn

1) How to use CSS Icons?

2) The example of CSS Icons.


How to use CSS Icons?

CSS Icons have default CSS style design. You can display all of CSS icon only call a class like

<i class="material-icons">android</i> for Google Icons

<i class="glyphicon glyphicon-envelope"></i> for Bootstrap Icons

<i class="fa fa-car"></i> for Font Awesome Icons


Google Icons

When you want to use Google font icon, you should call Google Font style in your web page using below link code

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Or you can use direct Google font form www.material.io It's an open source font icon.

Google Icon examples.

 

<!DOCTYPE html>
<html>
<head>
<title>Google Icon</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">android</i>
<i class="material-icons">done</i>
<i class="material-icons">perm_scan_wifi</i>
<i class="material-icons">thumb_up</i>
<i class="material-icons">visibility</i>
</body>
</html>

Double Click to Select Code

android done perm_scan_wifi thumb_up visibility


Bootstrap Icons

When you want to use Bootstrap icon, you should call Bootstrap style sheet in your web page using below link code

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

Or you can use it after download from here www.getbootstrap.com It's an open source icon.

Bootstrap Icon examples.

 

<!DOCTYPE html><html><head>	<title>Bootstrap Icon</title>	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">	</head><body>	<i class="glyphicon glyphicon-home"></i>	<i class="glyphicon glyphicon-pencil"></i>	<i class="glyphicon glyphicon-user"></i>	<i class="glyphicon glyphicon-film"></i>	<i class="glyphicon glyphicon-ok"></i></body></html>

Double Click to Select Code



Font Awesome Icons

When you want to use Font Awesome icon, you should call font awesome style sheet in your web page using below link code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.min.css">

Or you can use it after download from here fontawesome.io. It's an open source icon.

Font Awesome Icon examples.

 

<!DOCTYPE html><html><head>	<title>Font Awesome Icon</title>	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.0/css/font-awesome.min.css">	</head><body>	<i class="fa fa-home"></i>	<i class="fa fa-pencil"></i>	<i class="fa fa-user"></i>	<i class="fa fa-film"></i>	<i class="fa fa-signal"></i></body></html>

Double Click to Select Code






Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic