1) What is Web Icon?
Web Icon is a symbol that is used to represent a specific action or a capability on a webpage. It is used in documents as well as applications.
2) How can we link the font library?
We can link the font library in HTML head sections.
Example:
<head>
<link rel = "stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
3) What are the Web Icons Fonts?
Web Icons fonts are:
- Font Awesome
- Bootstrap Glyphicons
- Google's Material Icons
4) What are the advantages of Web Icons?
There are following features of Web Icons:
- It is easy to use.
- We have to download only Library font files .
- It helps to web developers to built an Icons.
- All web icons used within <I> HTML tag.
5) How can we use Font Awesome Icons?
We can use web icons by using HTML
<i> element.
Example:
<html>
<head>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<i class = "fa fa-inr"></i>
</body>
</html>
6) How can we define the Font Awesome Icons size?
We can define the size of Icons by using following codes:
Example:
<html>
<head>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
i.mysize{
font-size: 10em;
}
</style>
</head>
<body>
<i class = "fa fa-inr mysize"></i>
</body>
</html>
7) What are the icons provide by Font Awesome?
Font Awesome provides 519 Icons. There are some following categories:
- Web Application Icons
- Hand Icons
- Transportation Icons
- Gender Icons
- File Type Icons
- Spinner Icons
- Form Control Icons
- Payment Icons etc.
8) What are the various form control icons and their use?
There are various from control icons:
<i class="fa fa-check-square custom"></i>
<i class="fa fa-check-square-o custom"></i>
<i class="fa fa-circle custom"></i>
<i class="fa fa-circle-o custom"></i>
<i class="fa fa-dot-circle-o custom"></i>
<i class="fa fa-minus-square custom"></i>
<i class="fa fa-minus-square-o custom"></i> etc.
9) What are Material Icons?
Material Icons are simple and support all modern web browsers. It is based on vector. It uses font (Library) class
material-icons.
Example:
<head>
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>
10) How many icons font provided by Material?
Material provides 519 icons, following are given below:
- Action Icons
- Alert Icons
- AV Icons
- Communication Icons
- Content Icons
- Image Icons
- Maps Icons
- Navigation Icons
- Notification Icons
- Social Icons
- Toggle Icons etc.
11) What is Bootstrap Glyphicons and how to load the font (Library)?
Bootstrap Glyphicons is a library of monochromatic icons. It provides 250 glyphs in font format. It is loaded the font with
head HTML tag.
Example:
<head>
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
12) How can we define the size of Glyphicons Icons in Bootstrap?
We can define the size of Glyphicons Icons in Bootstrap by using following codes:
Example:
<html>
<head>
<link rel = "stylesheet" href = <link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
i.mysize {font-size: 6em;}
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>
13) What are the types of Material Social Icons and its use?
There are following types of Material Social Icons:
<i class="material-icons custom">cake</i>
<i class="material-icons custom">group</i>
<i class="material-icons custom">public</i>
<i class="material-icons custom">school</i>
<i class="material-icons custom">share</i> etc
14) How can we use Payment Icons by using Font Awesome?
We can use payment icons by using Font Awesome:
<i class="fa fa-cc-visa custom"></i>
<i class="fa fa-cc-paypal custom"></i>
<i class="fa fa-cc-mastercard custom"></i>
<i class="fa fa-cc-discover custom"></i>
<i class="fa fa-cc-jcb custom"></i>
<i class="fa fa-cc-stripe custom"></i> etc.