Web Icons with No External Libraries! (🙅 No More Font Awesome) 

Love to hear it!

Love to hear it! Glad it helped

Yeah that's another more efficient method if you don't mind doing that yourself 👍

Yes you don't need iconify, they just make it a little easier than going through the Dev tools

Thanks! Yes, copy the SVG code and convert it to a data URL using a site like this: yoksel.github.io/url-encoder/ Now you can use it like a background-image in CSS. You have to manually style the pseudo-element it to make it look right so not be as convenient as FA, but still works well.

@@EricMurphyxyz Thanks for the reply. I will try this approach. 👍🏽

Thanks! You can move all the SVG code to a separate file and replace it with inside the SVG tag.

@@EricMurphyxyz how can I do that?

@@muhammadhaiqal531 I explained it pretty clearly? Copy the SVG code to a separate file, name it something like your-icon.svg and then reference it with the tag I showed above

@@EricMurphyxyz yes I did exactly that, but somehow it doesn't work, but I figured a workaround so yeah

@@muhammadhaiqal531 i tried too, but it didn't work

I would assume so, should work with any SVG code.

Nice, great resource! Never heard about this before

@Entertainment Roller Coaster I am always around

@Entertainment Roller Coaster Once you made your file. Use the first code I posted to show it. eg Just change the xlink line to whatever icon you want to show eg

@Entertainment Roller Coaster You have all your icons in one file. That means your icons will load faster as it is one call to the file. As for the individual icons you can either make them yourself in illustrator and export the data, or download and use other peoples svgs. I do a bit of both. the important part is the viewBox, and the paths. Personally I would optimise your svg online before putting it in the file. This removes all the unnessary groups which you don't need on the web. I also remove colours. Then you can colour your svg using css.

You mean an attribution link?

Arch Linux!

Could you perhaps save the SVG to your images folder and put it's URL in the content " " property? I haven't tried it, but that's what I would try first

turn it into a data url

Font Awesome is under an open source license, so it's all good.

@@EricMurphyxyz Thanks, this is fucking awesome then 🤣

Wow, there's a lot of great icon resources I never knew about

There are more efficient ways to use icons without bringing in the bloated Font Awesome library. I know react-icons for React is good, but I'm not sure of an easier way to do it in just HTML. That said, I only really need around 5 icons for a given website and copy & pasting a small amount of icons is not a big deal for me. The performance savings are worth it for me, but it's up to you.

There are still tons of ways to get the svg code without that specific website, it's not just something they can change their policies and remove. Making your own icons may be a useful skill but nobody is going to hand render a Facebook icon for their website

@@EricMurphyxyz yeah, i know, i think knowing how to insert svg files into their website is a god skill, that's all, your advice is sound.

Even the official Font Awesome library brings in a bunch of unnecessary JavaScript. React Icons is a lot more light weight.