Skip to main content

Useful free font list from fontawesome is the next generation of the web’s favorite icon library.

for example, one can easily use CSS to get it downloaded on your website for example Facebook square

Open link

Use below once line code in HTML page to view Facebook icon.

<i class="fab fa-facebook-square"></i>
<<i class="fab fa-facebook-f"></i>

Facebook Font will look like as below.

Fontawsome site contains many free icons here is the link

This site contains many icons of different sizes. SVG files are also available.

Sizes are available for each icon.

Which property is useful to hide the element but should not take space

There are 2 different properties to hide element from User Interface. One is visibility Property and other is display property.

For example if we want to hide one element like button. Then using code “visibility:hidden” html page will hide the button from UI. But space occupied or size of the button will get consumed on front page. So tag is getting rendered but not data. So tag size is visible on page but not its content.

If user want to hide the complete tag and associated data from page then html/css provide property like “display:none”. By using display none property user can hide not only data but associated tag as well. This will have no impact on page layout.

Below are example which will give difference between visibility:hidden and display:none

Step 1) Displaying two buttons

<button type="button" >Button One</button>
<button type="button" >Button Two</button>

Step 2) Now using visibility:hidden for first button.

<button type="button" style="visibility:hidden">Button One</button>
<button type="button" >Button Two</button>

If you observe in above code button one is hidden but size is occupied on page layout.

Let’s use display:none property and see the effect.

<button type="button" style="display:none">Button One</button>
<button type="button" >Button Two</button>

So in above example if you observe due to display:none property button one is completed hide and associated tag is not rendered on page. That’s why button two is completely left aligned.

Run time user can change property to hide the element by using below code in java script.

document.getElementById("button1").style.visibility = "visible"; 

HTML Marquee Tag simple Example for texts

To show scrollable texts or images within a web page we use marquee tag in html. Marquee tag has around ten attributes. Marquee can be implemented by using CSS. Below are examples of marquee tag with different attributes and their code.

Width Attribute: By providing width in percent we design marquee.

<marquee width="60%" >
This is a example of width attribute in marquee tag.
This is a example of width attribute in marquee tag.

Height Attribute: provides the height of a marquee

<marquee width="80%" height="80%">
This is a example of width attribute in marquee tag.
This is a example of width attribute in marquee tag.

Direction: Direction attribute provides the direction to scroll. values which can be used are left, right, up or down.

<marquee  direction="up" >Text going Up</marquee>
<marquee  direction="right">Text going Right</marquee>
<marquee direction="left" >Text going left</marquee>
<marquee  direction="right">Text going Down</marquee>
Text going Up Text going Right Text going left Text going Down

Scrolldelay: The Marquee scrolldelay attribute in HTML is used to set the interval between each scroll movement in milliseconds.

<marquee direction="up" scrolldelay=500>Text going Up</marquee>
<marquee direction="right" scrolldelay=200>Scroll Delay for 200</marquee>
<marquee direction="down" scrolldelay=1500>Scroll delay around 1500</marquee>
Text going Up Scroll Delay for 200 Scroll delay around 1500

scrollamount: Marquee speed can be changed using the “scrollmount” attribute. By Setting value 1 it scrolls slow and to increase the speed we can specify value more than 1

<marquee behavior="scroll" direction="right" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="25">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="45">Very Fast Scrolling</marquee>
Slow Scrolling Little Fast Scrolling Fast Scrolling Very Fast Scrolling

Behavior: Three different values we can pass in behavior tag. Sliding, scrolling or alternate.

<marquee behavior="Slide" direction="right" scrollamount="10">Sliding Behavior</marquee>
<marquee behavior="scroll" direction="right" scrollamount="10">Scrolling Behavior</marquee>
<marquee behavior="alternate" direction="right" scrollamount="10">Alternate Behavior</marquee>
Sliding Behavior Scrolling Behavior Alternate Behavior

Loop: This category will decide number of times marquee is repeated. Valid values are number and “infinite”. Infinite is default value which means it runs endlessly.

<marquee scrollamount="5" loop="infinite">Infinite example for marquee</marquee>
<marquee scrollamount="5" loop="1">Loop through 1 time only for marquee</marquee>
Infinite example for marquee Loop through 1 time only for marquee

Alternative for marquee tag in html 5

There is no such alternative for marquee tag. But similar type effect we can achieve by using CSS, JavaScript.

Refer this for alternate of marquee in CSS.

For more information refer