FontAwesome Icon Background Animation Effects | CSS Animated Background

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code of My New Video's Everyday!
Join : / @onlinetutorialsyt
------------------
Source Code : / onlinetutorials
Facebook Page : / onlinetutorialsyt
Instagram : / onlinetutorials_youtube
Twitter : / onlinetutoria16
Website : www.onlinetutor...
Buy Me A Coffee : www.buymeacoff...
------------------
give proper credit if you repost this on other social media platform
------------------
Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

[@OnlineTutorialsYT]

Inspired By These
1) ruclips.net/video/3T4rD_P2nc8/видео.html
2) ruclips.net/video/6XbWvDmBmTE/видео.html

[@seveto3911]

Wow, you are amazing. You are inspired by your projects.

[@benzy_]

Sir can I make tutorial for your videos in which much explanation is required and I will send it to your email not to your channel ..please sir !!❤️🥺 it will be proud for me.. if you like 👍🏻🙂😐😶🙂

[@benzy_]

@@OnlineTutorialsYT sure sir ...🙂🙂 Thanks for responding ❤️❤️ I will try my best

[@HafizFarmankhan]

Can you create this website design animation? Wordsimilarity. com

[@alihangudenoglu]

i did the same but it doesn't repeat. HELP !!!!!

[@akdarklight156]

thank you so much I completed this and showed it to my mom she taught I was a gunieos . thank you I have learned different ways that I can style it so simple but super strong

[@arshbedi4506]

😂😂😂😂🤣🤣🤣🤣

[@Daily_motive]

hlo bro can u provide me code of this video

[@rasi9031]

Others: This is impossible...
Online tutorial: Nothing is impossible....

[@umehmoses8118]

Your background music soothes me .....i really love your videos

[@benyamin4634]

thanks for this wonderful tutorial. unfortunately there is no way to use this animation effect behind another div as a background (with hovering effect). if you have any idea of this problem please let us know because making a section with an animation whithout putting something in front of it is somehow not good. thanks for your beautiful videos❤

[@simphyy]

try doing this
bubbles{
z-index= -100;
}
if it does work let me know

[@marcelomaciel3490]

congratulations, you are the master of HTML Css Javascript, excellent work👏👏👏

[@israilgulzar7936]

Mashaallah bhai make duva for me that I also became a great developer
Jazakallhu al khear

[@Mohan_Abdullahi]

King of CSS

[@waytofuture]

bhai big fan
maja agaya

[@EshaanKataria-qx8rp]

I think in js we can loop it

[@pixelarcade7905]

I'm doing what the video is showing, but the icons are not showing in my screen. The only things that appear are squares and weird symbols. Can anybody help me figure out what's going on?

[@stacydevries4241]

Thanks!

[@nipundeshappriya2654]

In my case I followed your video exactly and used the same CDN links, but the fontawsome icons are showing as empty boxes..do you have any suggestions for this please help??

[@BadBoy-sc3xv]

Same for me ALSO DID YOU GET SOLUTION

[@_r4in.1]

Same here 😢

[@rishitamukherjee4941]

THIS BACKGROUND MUSIC I WILL FELL ASLEEP FOR GOD SAKE!!!!!

[@Aman-jf3iv]

You are really a god designer, keep growing 🤗

[@kwpf]

Cool effect! I had to mute the music cos it's really annoying.

[@VGGreenScreen]

1:11 sir that website is can't find plz send me the link 😀 sir please

[@dwikialiriza6002]

me too

[@shhdevon]

THATS INSANE!!!

[@leopillay8939]

This channel has been so inspiring for me n has helped me in my early journey through codibg

[@vivekvvijayan7498]

I am so impressed and exited by your these type of creativities. So i want to understand the best practices and the method that you were studied this, So please upload a vidio about your experience

[@g4merlin]

1st you learn coding then you practice playing like playing a game and you create stuff without thinking thats the only thing you need to know about learning of anything in life :)

[@username-gv7eq]

This is awesome!!

[@sanil2k8]

Nice idea

[@aboelsoof301]

creative background

[@赵汝灵]

realllllllly awesome...love ur vidoe so much

[@BloggerProfissional]

Muuuito top... Like com certeza 👍

[@knowledge5608]

Genius

[@gursagarsingh1328]

Please Make a video on different Different 3d Effects

[@snssatyabhagavan]

Great idea 💡

[@rhinotank]

These effects are amazing!

[@shubhammetkar6021]

Great to see you're working in Vs code👍🏻

[@papa_pataatar]

Does brave support the preview cauz i cant see the icons not only on brave but also on internet explorer google chrome and microsoft edge too !!

[@phibik]

Great thumbnails

[@durgfestivalvibes]

😍😍😍 great effect, thanks

[@uzbekistann]

yessss broo

[@carlosaquino7607]

It's cool, but how do I use it as a background? I'd appreciate your help

[@masaodihasan]

love ur work .

[@alexdossantossilva8992]

Canal muito bom !!! o melho que já encontrei

[@klmno_official]

God bless you
You are on top of professionalism

[@aniworld4963]

that's fine but how can I put it in the backgroud

[@Surajmsaji]

can anybody help my icons arenot visible they are just some box. thaank for yor help

[@MapleLeafYT]

সন্দর

[@camiloforero5924]

Wow so cool!!

[@hasanhira-me]

Ma Sha Allah, very nice bro. Thanks.

[@lokeshnegi5051]

I am a beginner so I have one que is this the right way to include these animation in my react-projects or is there a better way.

[@RooTHackera]

Its awesome.

[@ritzmusicstudio1075]

This project is amazing!! Hm.... I wanna ask, why we should place the link of boot strap CDN to our html?? (Iam still a beginner)

[@lvlupdev]

Hello ! :)
It's a common practice : it leverages browser cache (if I loaded it from somewhere else I don't need to reload it for your website as it's already in my cache files). You don't HAVE TO use a CDN : you could also download the .css files (or whatever it is) to your host and serve them yourself. You will end up using more bandwidth, but it's often the only way to customize some aspects.

[@ritzmusicstudio1075]

@@lvlupdev thx for the reply!! Really appreciated.....

[@alvareztorrezluisalberto407]

ERES UN GENIO

[@lucklessman3472]

Awesome bro.nice video

[@deepone7242]

It's really amazing

[@haithemkarrouche4003]

Did great job bruh 🔥

[@bijeshamatya8494]

It would be better if you add timeline on your 🎉, it's very annoying to go through entire 📷 just to understand the code. Keep up the good work

[@TheIguana3d]

Wow, Very cool 😍

[@jun1408]

omg idk css can go so fat, really help thx

[@juancamilo8296]

hey I've been watching your videos and they're all great but I haven't seen how those backgrounds are used and I'm saying it because I've already searched and tried but I can't find a way to use it as a background

[@Amin04]

Position: absolute ;
*With some fixes*

[@Codemyhobby]

First comment sir

[@rockybanana2242]

@Online Tutorials how do you add
the background to a website?

[@dannymaher7766]

you probably have fixed it or dont care by now but you would add this code and then anything you want over the top you would set to display: absolute and then can position it with that. and you can set the elements you want to be in front using z index

[@rockybanana2242]

@@dannymaher7766 thanks brother

[@francovalladares1748]

master

[@firmanway]

I love the music background

[@netweight2523]

Awesome 🙂

[@GayatriKoppisetti-t5h]

How to get this animation as background in my main page??

[@phiduong6008]

wow amazing

[@benzy_]

Present sir

[@mysticgrafix_ind]

hello brother my some icons are overlapping to one another please help me to overcome this issue

[@abinesharchunan3427]

Bro how to add link in header nav bar for example if we click download button want to move to next page and display zip file or anything show for download to others. How to make it.please make a video.

[@jitender6387]

This is amazing brother

[@chakradharcholleti6722]

You are awesome

[@webworldzone962]

Nice video..👍

[@user-gf8mo6pg5o]

really nice, 10/10

[@itsm3dud39]

I dont know when i can do these things on my own from scratch

[@ayushdabhi5138]

hmm

[@zafarasrorov3687]

Wow just wow can't say something )) probably css king.

[@oneidchannel2026]

Very good

[@shaileshdeshpande8539]

Awesome

[@shahbazliaquat00]

plzz change tag colors in visual code... becoz dekhny m buht mushkil hoti ha... like koi friendly color use karain❤❤

[@TommyTips]

Good Job! I love it

[@nikitajolobov4591]

Thank you man! Good luck in your business

[@soumitramandal]

So cool!!!!

[@licitdeviant317]

How would you set this as an actual background so you can have content over it?

[@GoStartWise]

1st to watch

[@codersujit5427]

That's awesome 😍

[@fesa9926]

awesome

[@design3309]

Good morning sir,I also design website using Html and css. I am a student and I am your big fan sir.

[@prem9469]

Inspired from you a lot, a small help plz explain how to add 3d models in our html project.

[@tacodelmetro8385]

Insane!

[@kumarpatil2815]

Hi Muhammad, can you please guide me on how i implement textarea with line number as prefix, i can't use the Jquery due to project standard.

[@deepak8586]

Awesome!

[@Rezz4200]

how could i set this kind of html page as my website background for every page. Kindly Help!!!

[@mohamedabdelmoety2731]

woooooow

[@psociety371]

awsm

[@Arnav_Verma325]

Can you give link of font awesome cdn i can't find it. Please reply.

[@스윕]

Awesome!!

[@sipocharles9180]

First... to say OMG OMG OMG 😎

[@adrmad8849]

Cool stuff, as always!👌

[@architk4503]

First to comment

[@vadelbaye5852]

my animation couldn't Set ln the full screen, i use sublime text 3

[@reyansh5968]

Hi, please reply to me at your earliest
I tried using this but it isn't working + fontawesome has launched its 6th version please help

[@harsh_9_17]

The logos are not supported??

[@Hex09]

awesone :))

[@ajoo404]

Can you help me?...I'm only getting a box display even though my internet connection is active

[@OnlineTutorialsYT]

include fontawesome cdn link

[@ajoo404]

@@OnlineTutorialsYT Oh, it turns out the link provided was wrong. Thank you🙌

[@nusratjahanmitu9594]

Thanks

[@Hangoutapp]

Hi can you please position font awsome icon like google play store

[@artis6365]

Can you make music player with javascript?