Tutorial: CSS Icons

By Emmanuel Chinonso

Web Developer

Last updated: 17 May 2024

CSS Icons

Icons can easily be added to your HTML page, by using an icon library.

How To Add CSS Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. The name of the specified icon class to any inline HTML element (like <i> or <span>). All the CSS icons in the icon libraries below, are free, scalable vectors that can be customized with CSS (size, color, shadow, etc.). We will look at how to add the CSS Icon code.

HTML Code:

html

<!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>

The Display Property

The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

HTML Code:

html

<div>
  <h1>
    -
    <h6>
      <p></p>
      <form>
        <header>
          <footer>
            <section></section>
          </footer>
        </header>
      </form>
    </h6>
  </h1>
</div>

Inline Elements: An inline element does not start on a new line and only takes up as much width as necessary.

HTML Code:

html

<span>
  <a> <img /></a
></span>

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved. The <script> element uses display: none; as default. Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards. A common example is making inline <li> elements for horizontal menus:

CSS Code:

css

li {
  display: inline;
}

Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

CSS Code:

css

h1.hidden {
  display: none;
}

CSS Layout - The position Property

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). There are five different position values:

Static
Relative
Fixed
Absolute
Sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

Static position: HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.

CSS Code:

css

div.static {
  position: static;
  border: 3px solid #73ad21;
}

Relative Position: An element with position: relative; is positioned relative to its normal position.

CSS Code:

css

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73ad21;
}

Fixed Position:

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

CSS Code:

css

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73ad21;
}

Absolute Position: An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

CSS Code:

css

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73ad21;
}

Sticky Position:

An element with position: sticky; is positioned based on the user's scroll position.A sticky element toggles between relative and fixed, depending on the scroll position.

CSS Code:

css

div.sticky {
  position: -webkit-sticky;
  safariposition: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4caf50;
}

Overlapping Elements: When elements are positioned, they can overlap other elements.The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).An element can have a positive or negative stack order.

CSS Code:

css

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

CSS Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. The overflow property has the following values:

Visible - Default. The overflow is not clipped. The content renders outside the element's box
Hidden - The overflow is clipped, and the rest of the content will be invisible
Scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
Auto - Similar to scroll, but it adds scrollbars only when necessary.

The overflow property only works for block elements with a specified height.

CSS Code:

css

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

CSS Grid

CSS Pagination