CSS Introduction
CSS Structure
CSS Colors
CSS Background
CSS Width-Height
CSS Float
CSS Display
CSS Borders
CSS Fonts
CSS Text
CSS Align
CSS List
CSS Margin
CSS Padding
CSS Position
CSS Tables
CSS Images
CSS Link
CSS Icons
CSS MAX MIN WIDTH-HEIGHT
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.
<!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.
<!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.
<!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
