Web icon Interview Questions and Answers

15+ TOP Web icon Interview Questions

Web icon Interview Questions
Web icon Interview Questions

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.

Real Time Web icon Interview Questions