css icons properties tutorial

2026June22

Web html5, css3, javascript, php, sql, jquery, xml, ajax, web design & development, photo maker, SEO.
Online web design, along with everything you need for a complete website.
css font awesome properties.The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

How To Add Icons
Add 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.)
Font 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:
font-awesome.min.css

font awesome icons size demo

font awesome icons size code


<style>
.large{font-size:18px!important;
color:#77B5FE;}

.xlarge{font-size:36px!important;
color:cyan;}

.xxlarge{font-size:54px!important;
color:#008000;}

.xxxlarge{font-size:72px!important;
color:#ff0000;}

.xxxxlarge{font-size:90px!important;
color:#ff3800;}

.xxxxxlarge{font-size:108px!important;
color:#0cf;}
</style>

<i class="fa fa-home large"></i>
<i class="fa fa-home xlarge"></i>
<i class="fa fa-home xxlarge"></i>
<i class="fa fa-home xxxlarge"></i>
<i class="fa fa-home xxxxlarge"></i>
<i class="fa fa-home xxxxxlarge"></i>

Icon Libraries

☰

Font Awesome Icons
Google Material Icons
Bootstrap Icons

Using Icons

☰

To use an icon, just add the name of the icon to the class of an HTML <i> element.

To control the size of the icon, change the font-size property of the icon, or use the x-size classes:

small
large
xlarge
xxlarge
xxxlarge
xxxxlarge

font awesome icons color with spin demo

font awesome icons color code


<style>
.xxxlarge{font-size:72px!important;}
</style>
<div class="col-29">
<span class="x-five"><i class="fa fa-home xxxlarge" style="color:#66FF00; padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-bars xxxlarge" style="color:#77B5FE; padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-arrow-left xxxlarge" style="color:red;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-arrow-right xxxlarge" style="color:cyan!important;padding-left:4rem;"></i></span>
</div><br><br>
<div class="col-29">
<span class="x-five"><i class="fa fa-search xxxlarge" style="color:#5d8aa8;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-close xxxlarge" style="color:#cd7f32;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-refresh xxxlarge fa-spin" style="color:#008000;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-trash xxxlarge" style="color:#87ceeb;padding-left:4rem;"></i></span>
</div><br><br>
<div class="col-29">
<span class="x-five"><i class="fa fa-male xxxlarge" style="color:#960018;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-car xxxlarge" style="color:#4F6AD7;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-truck xxxlarge" style="color:#007FFF;padding-left:4rem;"></i></span>
<span class="x-five"><i class="fa fa-plane xxxlarge" style="color:#c00;padding-left:4rem;"></i></span>

All Basic HTML5

HTML is the main markup language for web pages, and its elements are the basic building blocks of web pages. HTML is written in the form of HTML elements consisting of tags enclosed in "greater than" and "less than" symbols within the content of the web page.

All Basic CSS3

CSS (Cascading Style Sheets) is a computer language that belongs to the category of style sheet languages used to control the appearance of a document written in a markup language.It is used to control the appearance of a document written in HTML and XHTML, that is, to control the appearance of a web page and a website in general.

js JAVASCRIPT

Javascript is a set of computer software and specifications developed by James Gosling at Sun Microsystems, later acquired by Oracle Corporation, which provides a system for developing application software and its development in a multi-platform computing environment.

CREATIONS

In this chapter I call creation I will present you creations html, css and javascript that are very useful and creative in a web site. You can get them ready-made with Netbax creations or create them yourself as you wish with the help provided by the Netbax editor.

NAVIGATION Bar

having easy-to-use horizontal & vertical menu is important for any web site. with css you can transform boring html menus into good-looking horizontal & vertical bars. horizontal & vertical menu is such an important part of your website. it’s how your visitors navigate to the main areas of your site and makes it easy for them to find.

WEB BUTTONS

Collection of hand-picked free HTML and CSS button code examples.In this article, we'll see some really cool looking responsive buttons using only a few lines of CSS.You are free to copy, modify and use this code as you wish.All the buttons shown here can scale accordingly to the font-size attribute, and should work in any relatively recent browser.