What is icon on a web page:
A website icon is a picture or a symbol that you can put on your website. It acts like a button or a link that you click on, or it can simply be decorative. These icons, available for free from iconmonstr, are uniform and easy to put on your website. Icons can be part of your business brand.
How to use icons in css and Html:
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
Add the name of the
specified icon class to any inline HTML element (like <i> or <span>).
Fonts Awesome icons:
To use the Font
Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:
<script src=”https://kit.fontawesome.com/yourcode.js” crossorigin=”anonymous”></script>
Example
<!DOCTYPE html>
<html>
<head>
<script src=”https://kit.fontawesome.com/a076d05399.js” crossorigin=”anonymous”></script>
</head>
<body>
<i class=”fas fa-cloud”></i>
<i class=”fas fa-heart”></i>
<i class=”fas fa-car”></i>
<i class=”fas fa-file”></i>
<i class=”fas fa-bars”></i>
</body>
</html>
NOTE: This code should be run with visual studio code or Note pad++.
Bootstrap icons:
To use the Bootstrap glyphicons, add the
following line inside the <head> section of your HTML page:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
Example
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
</head>
<body>
<i class=”glyphicon
glyphicon-cloud”></i>
<i class=”glyphicon
glyphicon-remove”></i>
<i class=”glyphicon
glyphicon-user”></i>
<i class=”glyphicon
glyphicon-envelope”></i>
<i class=”glyphicon
glyphicon-thumbs-up”></i>
</body>
</html>
NOTE: This code should be run with visual studio code or Note pad++.
Google icons:
To use the Google icons, add the following line
inside the <head> section
of your HTML page:
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
Example
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”>
</head>
<body>
<i class=”material-icons”>cloud</i>
<i class=”material-icons”>favorite</i>
<i class=”material-icons”>attachment</i>
<i class=”material-icons”>computer</i>
<i class=”material-icons”>traffic</i>
</body>
</html>
NOTE: This code should be run with visual studio code or Note pad++.
Comprehensive Review On Types Of CSS Selectors
CSS selectors are used to “find” (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selector (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors(select and style a part of an element)
- Attribute selector (select elements based on an attribute or attribute value)
The CSS element Selector
Example
p {
text-align: center;
color: red;
}
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element
Example
The CSS rule below will be applied to the HTML element with id=”yusuff1″:
#yusuff1 {
text-align: center;
color: red;
}
The CSS class Selector
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example
In this example all HTML elements with class=”center” will be red and center-aligned:
.center {
text-align: center;
color: red;
}
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
The CSS rule below will affect every HTML element on the page:
* {
text-align: center;
color: blue;
}
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
NOTE: it can be grouped to minimize the code
To group selectors, separate each selector with a comma.
Example
h1, h2, p {
text-align: center;
color: red;
}
So all CSS selectors are:
#id
.class
element.class
*
element
element,element,element