🥳
Black Friday Sale is on: Get Amazing deals on tools and resourcess
postImage

Tutorial: CSS Icons

blogImage

By Emmanuel Chinonso

Web Developer

Contrast Bootstrap UI Kit

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

CSS Icons

How To Add 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 icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.).

HTML Code:

1<!DOCTYPE html>
2<html>
3 <head>
4 <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
5 </head>
6 <body>
7 <i class="fas fa-cloud"></i>
8 <i class="fas fa-heart"></i>
9 <i class="fas fa-car"></i>
10 <i class="fas fa-file"></i>
11 <i class="fas fa-bars"></i>
12 </body>
13</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:

1<div>
2<h1> - <h6>
3<p>
4<form>
5<header>
6<footer>
7<section>

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

HTML Code:

1<span>
2<a>
3<img>

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:

1li {
2 display: inline;
3}

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:

1h1.hidden {
2 display: none;
3}

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:

1div.static {
2 position: static;
3 border: 3px solid #73AD21;
4}

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

CSS Code:

1div.relative {
2 position: relative;
3 left: 30px;
4 border: 3px solid #73AD21;
5}

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:

1div.fixed {
2 position: fixed;
3 bottom: 0;
4 right: 0;
5 width: 300px;
6 border: 3px solid #73AD21;
7}

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:

1div.absolute {
2 position: absolute;
3 top: 80px;
4 right: 0;
5 width: 200px;
6 height: 100px;
7 border: 3px solid #73AD21;
8}

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:

1div.sticky {
2 position: -webkit-sticky; Safari
3 position: sticky;
4 top: 0;
5 background-color: green;
6 border: 2px solid #4CAF50;
7}

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:

1img {
2 position: absolute;
3 left: 0px;
4 top: 0px;
5 z-index: -1;
6}

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:

1div {
2 width: 200px;
3 height: 50px;
4 background-color: #eee;
5 overflow: visible;
6}

Contrast Bootstrap UI Kit

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...