Easily Add Social Media Icon Links to Your Website with HTML & CSS

In this video I'll be showing you how to add icon links for sites like Facebook, Twitter, Instagram, Snapchat etc. on your own website. This is perfect for small business website designs, portfolios and so on.
Ionicons Reference:
ICON SEARCH - ionic.io/ionicons
USAGE - ionic.io/ionic...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #css

[@esasrl3384]

You are a life saver mate! Greetings from Italy 🇮🇹

[@sanskrutiswami8276]

I was recently given an assignment to create a login form and I had no idea how to add the social media icons.
Thank you for the explanation! It was really helpful.

[@swapnilbauskar3485]

Broooo , all concepts you explained to me in the video i understood them crystal clear. I had been watching other YTubers for this & all of them flopped around the concept. You got straight to the concept & made it easy to understand at the same time making it easy to execute. Please do more videos like this of other languages as well. I subbed. Love ya !!!

[@kenduxbury7122]

Beginning web dev here...THANK YOU for this vid!!! Helped tons.

[@user-ho7fg7bm3b]

This was very helpful brother, straight to the point. thanks once again.

[@precious8326]

omg, thank u so much , I searched so hard online and was so confused your video answered every question! SO SIMPLE will be subscribing ; )

[@An-yh2bl]

Thank you! :) Great tutorial, I had problems in a project with the underline at the social icons and I couldn´t make it disappear, now I know how to make that too! :)

[@sayori3939]

Thanks this is the best website for icons I've seen so far, they're very easily customizable, check the usage page, you can change colors, size

[@Kreative_kelly]

Total lifesaver! Thank you for the easy explanation!

[@tessr6238]

Clear, concise instructions that worked a treat - thanks!

[@dcode-software]

You're welcome

[@lewkez]

this is one of the best tutorials i've followed so far! thank you so much :), definitely deserverd a sub

[@erikdinos1229]

thanks! so easy to do,if you get the easy instructions!

[@edwinmaina4real]

Your video and sound are of good quality. Good job .
Thank you for the video.

[@patriciakulemeka2433]

this really helped me i was struggling to put icons thanks

[@alskopim]

Is there a way to change the size of the icon?

[@fabricioteidy]

On css its just font-size

[@work9167]

Beautiful. Nice and simple explanation

[@Mercinity]

how do you change the logo size and location? I want the logo to be along the bottom of the page

[@kennjenkins5645]

Sir, You are a very good instructor thank you.

[@fidelisomoni7537]

I could give you a hug for this, Thank you soo so much man!!!

[@dcode-software]

No problem 😊 glad I could help you.

[@Local_Nerd]

Thanks!

[@nanchinsunday6136]

Thank you your video helped me 😂😂

[@kidtukwan]

Thanks buddy! I link your explanation 😉

[@catcollector9495]

This was super helpful, thank you! Is there by any chance a way to size up the icon once you've added it in?

[@olanrewajuarilomo]

Yes, simply add a "font-size" property to your class. E.g .icon{
font-size: 50px;
}

[@shehryarkhan3646]

You can also use this property:
and u can use the CSS property like:
ion-icon {
font-size: 30px;
}

[@maxencejouane2337]

@@shehryarkhan3646 thank you so much i was struggling for 1 hour trying to change the size and saw your comment and tried it out. Thank you!!!!!

[@shehryarkhan3646]

@@maxencejouane2337 You are Welcome, bro! 😊

[@sherazkhan6522]

@@shehryarkhan3646 thnx alot

[@DineshRawat10]

Thanks a lot 😍✨

[@JoanaSilva-fk3ld]

Hi Dom. Thanks for this helpful video! Is there any way to change the icons alt text on hover? From "Logo Twitter" to just "Twitter", for example.

[@prenzgamer2001]

Thank you so much! vey helpful...

[@fieryninja2374]

Best tutorial really helped

[@btgdiablo2030]

how do i change the size of the icons? I saw one comment below but I can't figure it out.

[@damanackal]

ion-icon {
height: 50px;
width: 50px;
}
You change change the height and width like this in your .css file

[@daranithin6157]

@@damanackal thanks a lot !! saved my time

[@bettertosleep9949]

For some reason that didn’t work for me

[@Laughteragency]

​@@bettertosleep9949
Make sure you put the dot sign before the tag up

[@takimoussa7]

Try font-size

[@SpeedySurprises]

Thanks. You are helpful.

[@sridharreddy5714]

It was a great video sir i have seen in youtube regarding this topic i have a doubt sir i am new to html and css in this video you shown how to link the social media icons with our links but who ever clicked the link they can access our account right but i want to add my social media account to just to read it not for writting shall i know how to do that

[@whyjamesisacommonname]

thanks, i learned something :)

[@OujiDDumb]

how do i make it big!!! height and width not working men

[@simrandubey2596]

Thank YOu for the video it help allot

[@appiahfred2275]

Gracias amigo ❤👍👍👍Thanks

[@prasannasilva7754]

absolutely handy! thanks

[@mightycoderx]

I'll use ionicons next time I need icons instead of font awesome which is more of an hassle

[@warlordxone07]

Thanks a lot bhai love u ❤️❤️❤️

[@RianY2K]

Wow i dont know this Icon service is exist. This become alternative from font awesome.

[@sayaankhan3484]

You would think it would be this easy and simple.

[@ibrahim_011]

really helpful

[@jibanpradeepchand9102]

Thank you 😊

[@dilkihansapani9145]

Thank you buddy😍

[@aquasplash545]

thanks for this vid. I got an alternative to FontAwesome.

[@SvetaSveta-ms4hi]

Thanks a bunch! 😍

[@espectrograma]

Hi Dom. This video was very helpful for me, to drag followers to my social media through my website. On the other hand, I'd like to encourage the visitors of some pages of my website to share those pages with their friends. To do that, I suppose I might replace the address of my social media (facebook, twitter) for some other facebook and twitter address so that the visitors was directed to their own social media. Do you have a video on that matter? Thank you very much. Edgar, from South Brazil.

[@tom_barongo]

I wish you were answered, I could have learned too. Could you please help me on the same matter if already knowledgeable about it?

[@espectrograma]

@@tom_barongo Unfortunately I didn't get through that issue so far.

[@Woodcourtstudio]

Thank you so much

[@giovannimichel5506]

Thank you for the intel.

[@CodingGeeek]

Hi buddy! I hope you're doing great. which font-family you're using in vscode?

[@guyrowes1867]

Very nice man

[@bluecollarscrooge3981]

like the video but having problem positioning icons. using margins and padding (floating to the right but dont want the far right) and having issues.otherwise good

[@lol-hz9mc]

Thank you

[@gomango99]

That's great! Is there a way to have a short caption underneath it?

[@havicff3992]

thanks broo....

[@fannyfranzen7561]

Thanks

[@CreativeTutorialsWeb]

Impressive

[@akbarkarshiev2983]

thanks broo

[@phillipcroukamp1825]

How can I make the link open in the mobile app for socal media when someone opens the link on their phone?

[@eliadisousa]

In a Blogger gadget the default color of icons is gray and the hover orange.

[@Imk4r4n]

0 dislike bro : )

[@aatikaati1038]

How to change the size and give space in icons....i tried all properties about size but no work working

[@jazleen5743]

works, but it only appears on microsoft edge and firefox and not on google chrome?

[@OVERSKETCH]

my concern was that the icons seemed to be too small in my website when i tried to code it in, although i did put some margins it did work but the size cant seemed to be working

[@anandmahamuni5442]

Same w3s has similar library but can't change the size at all

[@djordjestankovic7484]

thanks

[@mattheworton9803]

Does this still work I'm using sublime text and I've entered the code but the icons not showing up on my html?

[@ourspolair7118]

I have a syntax error : is not recongnized, how to fix it?

[@kiroka9129]

您好，我想问一下，如果我想添加的社交图标不在网站上，例如行，我应该如何修改它

[@cherrym3202]

Hiii, this didn't work for me:( I had to make a "website" for a performance task in our school. I'm not sure what i did wrong but the icon itself wasn't showing up when i refresh the site.

[@cherrym3202]

is there something else i need to know or learn before trying to do this?

[@SimplyALord3542]

you should prob write ur code here so people can look for an error

[@alexisbaffoe1397]

What about calling, whatsapp and email?

[@3bdostation476]

how i can move him and make it biger????

[@vroger7959]

How to put this logo on the center of my page ?

[@thatdumdumguy1548]

hey just asking, what software are you using to do html?

[@dcode-software]

VS Code

[@thatdumdumguy1548]

@@dcode-software hey do you also know how to change the color of the icon?

[@maprajwol950]

How do i adjust its size?

[@MalcolmTheRealtor]

How do I align them vertically?

[@aatikaati1038]

Flex-direction : col;

[@ecommerceproject6569]

may i have copy of this html code pls?

[@yatheeshgowda6191]

Hii guys my name is Document Object Model (DOM) You are born for the web DOM

[@bea027]

won't work on mine :(

[@pepidge3371]

why doesnt it have tiktok

[@OujiDDumb]

how do i move it

[@garbaty2000]

position: absolute:
left:
top:
bottom:
right:
pair of these (ex. top, left) is enough

[@divanshverma3466]

How to change logo size please reply

[@divanshverma3466]

@Nate 338 thx

[@lisasievers8059]

you should clearly say PAY FOR ICONS!!!

[@Amal-xq1bm]

thANK YOU

[@nikki.cad0s]

I am so confused, i did everything in the video but nothing worked. It keeps saying it refused to connect.

[@codetherapytt978]

Thanks

[@dcode-software]

You're welcome!

[@ocean.w.a.v.e.s]

thank you!

[@mumbaikachallenge5526]

Thank you❤️