how to make icon in shopify

i'm going to show you how do you add,additional font,icons to your shopify theme,now the free themes that shopify offers,they do have their own set of icons like,we see,in the upper right hand corner here,and down below in the footer,however the available icons are,are limited in what you have what i'm,going to show you is how do you,import your own font icon library and,use those fonts,now the library that we're going to use,is called font awesome it's a pretty,popular font library,it has a lot of different fonts if you,go up into the icons here,click on that link you'll see we have,a lot of icons if you click on the free,only there is a pro version that you can,pay for but if you click on the free on,the left hand side here you'll see,all of the different icons that you have,available to you,what i'm going to do and even more than,this if you load more icons,many more will show up,we're going to import this into our,shopify theme so we have access to every,single one of these icons,now how do you do that first thing that,you'll want to do,is we're going to reach out to what's,called a,cdn font awesome cdn,and what cdns are are basically,let me we'll choose a different one,besides this bootstrap cdn let's do this,cdn,js right here the second link,in our search here what this allows us,to do,is it allows us to point to,this library so someone here this,website is hosting that library for us,and we can just point to it,by going to this url,now what i'm going to do is i'm going to,click on this little middle icon right,here,this middle icon what that's going to do,it's going to copy,this url,and if we go to our shopify theme files,i'm going to click into debut,edit code,and the first thing that we want to do,is we want to open up our theme,liquid files so go into layout theme,liquid file,where do we want to paste this code,let's paste it,somewhere in our head let's do it right,after this right after these,other links here,ctrl paste now it's a pretty long piece,of code,that's okay don't worry too much about,that,but we are now pointing to the library,ctrl s to save it,now let's test this out let's go and,grab,any icon i'm going to click on one,and you'll see here if i click,in this piece of code it's going to copy,that code,and that way i can paste it so i'm just,going to click on this to copy this html,code right here,and let's go find where we can,use this icon i'm going to open up my,sections here maybe we'll go into the,footer let's click on the footer here,because we see that we have an icon down,below here maybe,we want to add more icons maybe we want,to add some,payment icons so we scroll all the way,down,right on line 300 or 320,i'm just within this div i'm just going,to paste it in there it doesn't really,matter where we paste it in we just want,to see that it's working,paste in my code save it,refresh the page,oh that might be the wrong spot let me,go and grab a different spot,and you see social icons maybe in here,this might be better social icons,paste it save it,we're still not seeing it i don't think,we have,let me try a different spot right here,powered by,soul social icons i don't know if this,will show it to us,here we go it's got to be down this one,this last one right here,there you go so i have to fiddle around,a little bit maybe,let's let's go and find where this is,you will find where that one is,again it doesn't really matter where you,put it,but it would be nice to just,see if we can get the icon right there,let me right click and inspect here,this is social link,ul right here is a list social icons,link,social icons link is up top here,ah it should have worked right here let,me paste that in again one more time,in any case it shouldn't matter where,you put it,what matters is do we have access,to the icon and it looks like we do down,below here,and this is where you can use styling,use css,to make it larger make it smaller,let's go and just grab another icon,maybe this apple icon,copy that,press enter paste it in right here,refresh and there we go,we have our icons you,now have the ability to use any of the,icons any of the free icons,that we have right here,and there are plenty of them all right,up to 600,icons that's how you add,an icon library to your shopify theme,using a cdn,hello everyone if you've enjoyed this,video and are interested in learning,more,head on over to universateem.com,it's a full-blown course that teaches,you how to customize your shopify themes,whether you're a store owner or a,developer,we'll show you how to build in,navigation menus,how to filter your collection pages how,to customize,your cart page and so much more you'll,see you have a full-blown curriculum,shown right here of what lessons are,already there so sign up today,to become a shopify theme pro

Congratulation! You bave finally finished reading how to make icon in shopify and believe you bave enougb understending how to make icon in shopify

Come on and read the rest of the article!