css Icons Archives - ElseBazaar

Icons Audio & Video

Please Share On:

There are 58 free Audio & Video Font Awesome Icons. The table below shows the free font awesome Audio & Video icons:

You may be interested in the following topics:

Icons Arrows

Please Share On:

There are 113 free Font Awesome Arrow icons. The table below shows the free font awesome arrow icons:

You may interest in the following topics:

Icons Animals

Please Share On:

There are 16 free Font Awesome Animal icons. The table below shows the free font Awesome Animal icons:

You may be interested in the following topics:

Icons Alert

Please Share On:

There are 10 free Font Awesome Alert icons The table below shows the free font Awesome Alert icons:

You may be interested in the following topics:

Icons Accessibility

Please Share On:

There are 17 free Font Awesome Accessibility icons. The table below shows the free font Awesome Accessibility icons:

accessible-icon

You may be interested in the following topics:

CSS Lists

Please Share On:

Definition:

CSS lists are used to organize your list items either in unordered lists or ordered lists. See the example of unordered lists and ordered lists in the below table.

Unordered Lists	Ordered Lists
■ Banana ■ Orange ■ Mango ■ Apple	1. Banana 2. Orange 3. Mango 4. Apple

♡ Banana ♡ Orange ♡ Mango ♡ Apple	i. Banana ii. Orange iii. Mango iv. Apple

CSS Lists (All Properties)

CSS Lists (All Properties)

1. list-style-type

2. list-style-position

3. list-style-image

4. list-style

1. list-style-type

See the below syntax of list-style-type in the Unordered and Ordered list. list-style-tyle: none property is used to remove the predefined default settings of list bullets/numbers.

Syntax:

Unordered Lists:

1. list-style-type: circle;
2. list-style-type: disc;
3. list-style-type: square;

Ordered Lists:

1. list-style-type: armenian;
2. list-style-type: cjk-ideographic;
3. list-style-type: decimal;
4. list-style-type: decimal-leading-zero;
5. list-style-type: georgian;
6. list-style-type: hebrew;
7. list-style-type: hiragana;
8. list-style-type: hiragana-iroha;
9. list-style-type: katakana;
10. list-style-type: katakana-iroha;
11. list-style-type: lower-alpha;
12. list-style-type: lower-greek;
13. list-style-type: lower-latin;
14. list-style-type: lower-roman;
15. list-style-type: upper-alpha;
16. list-style-type: upper-latin;
17. list-style-type: upper-roman;
18. list-style-type: none;
19. list-style-type: inherit;

Unordered Lists Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
ul.circle {list-style-type: circle;}
ul.disc {list-style-type: disc;}
ul.square {list-style-type: square;}
</style>
</head>

<body>
<p>Unordered lists:</p>
<ul class="circle">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>

<ul class="disc">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>

<ul class="square">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>
</body>
</html>

Unordered Lists Output:

TRy it yourself

Ordered Lists Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
ol.armenian {list-style-type: armenian;}
ol.cjk-ideographic {list-style-type: cjk-ideographic;}
ol.decimal {list-style-type: decimal;}
ol.decimal-leading-zero {list-style-type: decimal-leading-zero;}
ol.georgian {list-style-type: georgian;}
ol.hebrew {list-style-type: hebrew;}
ol.hiragana {list-style-type: hiragana;}
ol.hiragana-iroha {list-style-type: hiragana-iroha;}
ol.katakana {list-style-type: katakana;}
ol.katakana-iroha {list-style-type: katakana-iroha;}
ol.lower-alpha {list-style-type: lower-alpha;}
ol.lower-greek {list-style-type: lower-greek;}
ol.lower-latin {list-style-type: lower-latin;}
ol.lower-roman {list-style-type: lower-roman;}
ol.upper-alpha {list-style-type: upper-alpha;}
ol.upper-latin {list-style-type: upper-latin;}
ol.upper-roman {list-style-type: upper-roman;}
ol.none {list-style-type: none;}
ol.inherit {list-style-type: inherit;}
</style>
</head>

<body>
<p> Ordered Lists:</p>
<b> 1. armenian</b>
<ol class="armenian">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="cjk-ideographic">
<b> 2. cjk-ideographic</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="decimal">
<b> 3. decimal</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="decimal-leading-zero">
<b> 4. decimal-leading-zero</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="georgian">
<b> 5. georgian</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="hebrew">
<b> 6. hebrew</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="hiragana">
<b> 7. hiragana</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="hiragana-iroha">
<b> 8. hiragana-iroha</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="katakana">
<b> 9. katakana</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="katakana-iroha">
<b> 10. katakana-iroha</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="lower-alpha">
<b> 11. lower-alpha</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="lower-greek">
<b> 12. lower-greek</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="lower-latin">
<b> 13. lower-latin</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="lower-roman">
<b> 14. lower-roman</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="upper-alpha">
<b> 15. upper-alpha</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="upper-latin">
<b> 16. upper-latin</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="upper-roman">
<b> 17. upper-roman</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="none">
<b> 18. none</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>

<ol class="inherit">
<b> 19. inherit</b>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ol>
</body>
</html>

Ordered Lists Output:

try it youself

2. list-style-position:

list-style-position property specifies the position of lists. The lists of bullets/numbers can be outside the list item or inside the list items. See the below example of using list-item-position.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
ul.inside {
list-style-position: inside;
}

ul.outside {
list-style-position: outside;
}
</style>
</head>
 
<body>
<p><b>Inside list position:</b></p>
<ul class="inside">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>
 
<p><b>Outside list position:</b></p>
<ul class="outside">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>
</body>
</html>

Output:

try it yourself

3. list-style-image:

If you want to use your own custom image list items then you can use the list-style-image property. See the source code below for using your own custom image list items.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.list-style-image{
  list-style-image: url('https://www.elsebazaar.com/blog/wp-content/uploads/2020/07/heart30x30.jpg');
  list-style-position: inside; 
}
</style>
</head>

<body>
<ul class="list-style-image">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>
</body>
</html>

Output:

try it yourself

4. list-style: Shorthand Property

list-style property is a shorthand property, where you declare all list-style properties. Let’s see the below example.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.list-style1{
  list-style: circle inside;
}
</style>
</head>

<body>
<ul class="list-style1">
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Apple</li>
</ul>
</body>
</html>

Output:

try it yourself

CSS Links

Please Share On:

Definition:

CSS links indicate that the blue color text has a link that opens another page upon clicking on it. The link text can be styled in different states such as:

link – normal, unvisited link
visited – already visited the link
hover – link on mouse over it
active – a link that is just clicked

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>

.css-links:link {
  color: blue; /*unvisited link*/
}

.css-links:visited {
  color: green; /*visited link*/
}

.css-links:hover {
  color: red; /*mouse over link*/
}

.css-links:active {
  color: orange; /*selected link*/
}
</style>
</head>

<body>
<p><b><a class = "css-links" href="https://www.elsebazaar.com/blog/css-tutorial/" target="_blank">Put your mouse over to check on different link states</a></b>
</body>
</html>

Output:

Put your mouse over to check on different link states

Output Sample

unvisited link

visited link

mouse over it

selected link

try it yourself

CSS Icons

Please Share On:

Definition:

CSS Icons play an important role in your webpage which makes your web page look more professional and elegant. It is very easy to use CSS Icons on your web page from icon libraries like Font Awesome Icons, Bootstrap Icons, or Google Icons.

Let’s see each CSS icon uses with examples.

1) Font Awesome Icons

You can use the font-awesome icons with a single code. The step is pretty simple and easy. First of all, you need to visit the Font Awesome Icons Site which is www.fontawesome.com, create an account, and get a code of the icons you need to use. Apply the font awesome code in the header section

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

and your icons where ever you needed.

<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-thumbs-up" aria-hidden="true"></i>

Source Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>

<i class="fa fa-calculator" aria-hidden="true"></i>
<i class="fa fa-bus" aria-hidden="true"></i>
<i class="fa fa-comment" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-tags" aria-hidden="true"></i>
<i class="fa fa-thumbs-up" aria-hidden="true"></i>

</body>
</html>

Output:

try it yourself

Here, you will see the list of available Font Awesome Icons.

2) Bootstrap Icons

Like Font Awesome Icons, you need to add a bootstrap Icons script into the head section of your page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

and the icon’s code wherever you needed.

<i class="bi bi-search"></i>
    <i class="bi bi-check-circle"></i>
    <i class="bi bi-x-diamond"></i>
    <i class="bi bi-book"></i>
    <i class="bi bi-calendar-day"></i>

Source Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>

    <i class="bi bi-search"></i>
    <i class="bi bi-check-circle"></i>
    <i class="bi bi-x-diamond"></i>
    <i class="bi bi-book"></i>
    <i class="bi bi-calendar-day"></i>

</body>
</html>

Output:

try it yourself

Here, you will see the list of available Bootstrap Icons.

3) Google Icons

To use Google icons on your webpage, use the Google icons script inside your Html <head>.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

and use your Google icons wherever you needed.

<i class="material-icons">backup</i>
<i class="material-icons">home</i>

Source Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
<i class="material-icons">assignment_ind</i>
<i class="material-icons">backup</i>
<i class="material-icons">highlight_off</i>
<i class="material-icons">home</i>
<i class="material-icons">info</i>
</body>
</html>

Output:

try it yourself

Here, you will see the list of available Google Icons.

Tag: css Icons

Icons Audio & Video

CSS Lists

Definition:

CSS Lists (All Properties)

1. list-style-type

Syntax:

Unordered Lists Source Code:

Unordered Lists Output:

Ordered Lists Source Code:

Ordered Lists Output:

2. list-style-position:

Source Code:

Output:

3. list-style-image:

Source Code:

Output:

4. list-style: Shorthand Property

Source Code:

Output:

CSS Links

Definition:

Source Code:

Output:

Output Sample

CSS Icons

Definition:

1) Font Awesome Icons

Source Code:

Output:

2) Bootstrap Icons

Source Code:

Output:

3) Google Icons

Source Code:

Output:

Copyright @2023. All Right Reserved.