.png)
Mobiprep has created last-minute notes for all topics of Icons, Lists and Links to help you with the revision of concepts for your university examinations. So let’s get started with the lecture notes on Icons, Lists and Links.
Our team has curated a list of the most important questions asked in universities such as DU, DTU, VIT, SRM, IP, Pune University, Manipal University, and many more. The questions are created from the previous year's question papers of colleges and universities.
Icons, Lists and Links
Question 1 - How can Icons be added in a webpage?
Answer - To insert an icon, name of the icon class can be added to any inline HTML element. The <i> and <span> elements are widely used to add icons. Earlier to use an icon on webpage, first download the icon, and then add an img tag with the icon's path as src to show the icon.
Icon Fonts like Font Amazing, Google Material Icons and Bootstrap Icons helps in directly using the icons without downloading or installing. the size of the icon image is fixed, when we download and use any Icon. It will get blur for larger screen resolution. Using Icon Font libraries, we can adjust the size, color, shadow of the icon
Question 2 - What are the CSS Icon Properties which can be changed?
Answer - CSS Icon Properties that can be changed are as follows :
1. Font Awesome Icons
Using a style prefix (fa) and the name of the icon, icons can be placed nearly anywhere . It is used with inline elements, and it is recommended that you stick to them with a consistent HTML element in a project . To add icons on the webpages it is acceptable to use the <i> and the <span> tags. You are free to change it into a <span> if you don’t like when the site provides you the code with the <i>. You need to use its name
prefixed with fa- and preferred style corresponding prefix to reference an Icon, . Using an <i> element to reference the icon will be like this:
<i class="fas fa-camera"></i>Or to reference the icon use a span element such as the code below:
<span class="fas fa-camera"></span>2. Size Font Awesome Icons and Give Colors to Them:
To match any text that you may use with them icons inherit the font size of their parent container.Size of Icons can be increased or decreased relative to the inherited font size with classes.As for the color, it can be set using the CSS color property. You just need to set your icons in a <div> element and define the color for it in your style or just give a style to your <i> element.By setting the font-size in the icon’s external style or directly in the style attribute of the HTML element referencing the icon it is also possible to directly style the size of an icon .
3. Icons with Buttons:
These icons can also be added while creating buttons. Just insert the icon in the <button> element.
4. Add Shadow Effects to Icons:
The CSS text-shadow property is important for having shadow effects on icons.
5. Use Font Awesome Icons in a List:
HTML lists can be styled with icons as decorative bullets.For that purpose, use fa-ul class for the <ul> element and fa-li class for the <li> element to replace the default bullets in unordered lists.
6. Animate Font Awesome Icons:
To get an icon to rotate we can use fa-spin class, and the fa-pulse class to have it rotate with 8 steps. Works especially well with fa-spinner.
7. Rotate Font Awesome Icons:
For arbitrarily rotating and flipping icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.
Question 3 - What are the four link states?
Answer - There are four different link states and those are link, visited, active and hover. Using the following anchor pseudo-class selectors these four states of a link can be styled differently .
a:link — It define styles for normal or unvisited links.
a:visited —It define styles for links that the user has already visited.
a:hover —When the user place the mouse pointer over it, It define styles for a link .
a:active —It define styles for links when they are being clicked.