How to Properly Use & Manage Custom Icons in Oxygen (No Images or Code Blocks!)

0:00:00
What’s up everybody welcome back to the channel. So here is the scenario. You have to build a website and you have been handed a custom icon set either by the brand you’re working for or from the designer and I’m not talking about font awesome icons or icon moon icons. None of that easy stuff like you were handed maybe an a i file or an eps file. Best case scenario you’re handed SVGs that are formatted properly but you could be handed SVGs that are not formatted properly and you have to use these icons in your build and here’s the other part about this the caveat. You have to use them properly which means they’re scalable. You can change the size after the fact like after you use them you can go back and change the size. You can change the color after the fact you can use custom classes to change the color globally across all of the icons that you are doing there’s only one way to do this inside of oxygen that is truly appropriate there’s multiple different ways that are I would say are inappropriate or not the way to go about this and unfortunately it’s the way that a lot of people are doing it they’re using images they’re using code blocks we’re not going to do any of that stuff I’m going to show you how to properly use. You can change the color and manage icons inside of oxygen so if this has been a struggle for you that struggle is about to go away let’s go ahead and get started so I’m going to screen share here is a blank slate for us and what we’re going to do first is we’re just going to add a section I’m going to build a little you know a little common card based section okay so I’m going to do base ultra light as our background I’m going to add a div I’m going to make this a three column grid it’s going to be one column on you. I’m going to add a column on medium device sizes it’s going to have a medium gap and I’m going to add a div this is going to be my card okay and I’m going to make a custom card because we’re talking about best practices so I’m going to make a card just give it a card class here and let’s see how we can style this I’m just going to make the background color white so we’ll do shade white and I’m also give it some padding so we need and I’m using automatic that CSS for all this stuff by the way so you see me. I’m going to do space L for my padding which is large padding and then I’m going to apply that to all sides and then I’m just going to start dropping elements in here we’re going to drop an icon we’re going to drop a heading and that’s going to be an age three heading I’m going to drop text and I’m going to add a text to the text. I’m going to give these things custom classes so it’s going to be card icon it’s going to be card heading it’s going to be card text. All right perfect and then I’m just going to give these some spacing so my margin top is going to be vars space s like that and then margin top on this heading is also going to be vars space s and there we go so now I’m going to call this business service and I’m just going to give it a little text it says this is the description of one of the businesses services there you go. So just like a nice little clean card and then you’ll notice when you use the icon module in oxygen you have the ability to change properties of the icon okay so I if I wanted these to be my brand’s primary color I can easily make these icons my brand’s primary color I can even do that after the fact so let’s take that off and I’ll show you by duplicating this card a few times now I have six cards okay so I should be able when we talk about scalability. I can talk about scalability to change the size and color of these icons without editing every single one one by one because I made a class called card icon I can now come in and do var primary and they all will change the primary and I can change the size to 42 and they will all change that’s what I mean by scalability so now what we’re going to do is we’re going to go get a custom icon pack because we’re not going to use font awesome or linear icons or anything like that. So I’m going to go to resources and Vato elements I’m going to open my invato elements account if you don’t have an invato elements account I would highly highly recommend getting one it’s worth its weight in gold like for the price you pay and what you get access to it’s tremendous so I’m going to search for business icons and we’re just going to choose an icon pack here first I need to go into graphics. I’m going to choose this one right here and I’m going to hit download download without license hit save file and we’re going to save this in my icons or my downloads folder so it’s hit save okay so let’s go to my downloads folder and you’re going to see that I have a zip file all right and let’s just pretend this is what you’ve been handed by the client or by the designer all right and so you’re going to open it and you’re going to inspect it hey what’s inside here well there’s a JPEG that does me absolutely no good let’s get rid of that. JPEG will never help you in this situation but there is an EPS file and that EPS file is the main vector file and it’s going to have all the icons in it but again you can’t just use this right so what do we do with it as a developer well the first thing that we’re going to do is we’re going to open it in Illustrator all right now if you don’t have Illustrator if you don’t have a creative cloud account as an agency I understand if you’re maybe a freelancer okay or you’re just doing this one off.

0:05:39
I understand you don’t have creative cloud but if you’re an agency and you don’t have a creative cloud account I don’t know what to tell you I can’t give you a tutorial in any other app let’s just say for vector graphics there are other ones out there there are free apps I believe for editing vector files I just I can’t do the tutorial for those because I don’t know how to use them but I do know how to use Illustrator and I want to give a special shout out let’s just do a pause give a special shout out to one of my developers Andrea who walked me through all this process he’s the one that taught me this process because I basically tasked him I’m a busy guy I was like Andrea we got to have a better solution for custom icon management inside of oxygen I don’t want to use images anymore I don’t want to use code blocks I want to be able to use the icon module in oxygen I want full control over these custom icons I want the ability to add them easily swap them out easily not have to use the media library not be tied down to a specific color or anything like that. And he basically showed me how to do it and now I’m teaching it to you so it’s really cool so here we are with just a little shout out to him. All right so here we are with our Illustrator file now I’m going to first just figure out like how this is formatted because they’re all formatted differently if you notice there’s a white box around all these icons I can just delete that I don’t need that. I’m also seeing that if I click an icon these are all independent which is good but the labels are all in a group which is fantastic that’s actually really good because I can just delete them I obviously don’t need the labels. Now I’m going to do this two different ways one way is the not not good way the way most people would do it and the other way is the way I would recommend doing it. So here’s the not good way you select them all you right click you set collect for export as multiple assets and that’s going to put all of these in your export panel as individual icons that is what you want and you’re going to select SVG and you’re going to hit export and you’re going to export these and I’m just going to make a new folder in here called wrong. Here’s our wrong folder and I’ll just hit choose and this is what people would do so they would go in here and they’re like cool I’m ready to use my icons and they would go to they would first say well I can’t use the icon element because these aren’t going to be icons are going to have to be images they would delete it and then they would go to image like this. Drag it to where it needs to go and then they would browse then they create this icons folder just like this you probably see me do this in tutorials by the way it is still the wrong way even though I did it all right so I’m going to drag all these icons in. And you’re going to see bam bam bam it’s going to load them now by the way I’ll just stop to say what or while this is doing this WordPress media library does not support SVGs by default so you’re going to need the safe SVG plugin or the happy five. I’ll plug in one of those to give SVG support to your media gallery but here are all of the icons they are scalable vector graphics they’re fine and I hit select image and it pops it in and then what I have to do is go to that card icon class put that on there and then I can’t really do like color this is the problem with this method right. So I go with rim maybe we’ll do three four something like that so I can change its size but I cannot change its color okay so you cannot at anywhere in here change its color and so if you use let’s say you have three brand colors and you use these icons all throughout the website number one you need three different sets of all the icons one in each color because you can’t change the color after you use them right. And then if you needed to swap them out or change the color at any point in time you have to go to every single icon and swap it and change its color and yada yada yada with actual as new SVG files you can’t just do it with CSS you can’t just do it with classes you have no global control whatsoever. So what a lot of people says is oh yeah well definitely don’t do it as an image just get the SVG code put it in a code block and then you have control over it but in actuality you now don’t have your icons in the gallery of any sort so they’re just all it’s just code all over your website. If you want to use an icon somewhere else on another page you got to go find the code copy the code go paste the code in a new code block there’s a lot of width and size issues that come along with that there’s still issues with customizing the color it’s not you can’t use the oxygen panel to do it really so there’s just a lot of problems.

0:10:22
So now what we have to talk about is the way that you should be doing this okay so first things first here’s what’s going to happen and i’m going to go back to the wrong files okay first i’m going to go to icon moon dot i.o we are going to use the icon moon app to generate the file that we need so i’m going to go to icon moon app. And i’m going to go to my projects and i’m going to say new project and i’m going to call this custom business icons and then i’m going to go to load alright and i’m going to show you again we’re still doing this the wrong way so let’s recap what did i do i open the EPS file i exported those icons as SVGs and i’m going to show you the next problem that you’re going to run into when you do this so i should be able to import icons go into there. Go into there wrong SVG and grab all these and open and this is what you’re going to run into right here see this message strokes get ignored when generating fonts or c hb c s h files you may convert them to fills and re import your SVGs now you’re going to get a lot of this like you just nonsense about converting to fills here’s what you need to do so i’m going to hit dismiss i’m going to select all these icons and i’m going to remove set. Perfect so i have to go back into illustrator and this is the step that you need to do before exporting so i’m going to grab all these and delete them from my export panel i’m going to select all of my icons and you can do this whenever you open an icon in illustrator you can click on it and if it has a stroke on it you’re going to run into problems it needs to have a fill instead of a stroke. Now the good news is in illustrator you can convert these easily so you select all of them go to object expand and then make sure that fill is selected right here and hit OK and it just converted all the strokes to fills if i click on here you’re going to see that i no longer have a stroke it is all done with fills now i can select them i can collect for export as single asset and i’m sorry not a single asset i need to collect for export as much as i want. Now i can export as an svg and we are going to go to backup and we’re going to do right here’s our right folder and i’m going to hit choose and it’s going to put my svg in there now let’s see what happens in icon mode so i’m going to go to import icons i’m going to choose the right folder svg grab all of them and open and now i did not get a warning that’s fantastic. I’m still not done yet so what i have to do now and by the way once you learn this process like it’s a breeze so if you feel like god there’s a lot of steps okay well number one it completely make sure entire website build scalable with icons okay if you’re using automatic dot css you can actually entirely change color themes this way without any issues whatsoever so there are massive massive benefits to doing this and once you practice it one or two times you’re able to breeze right through it it takes no time at all. Alright so i’m going to click the little three dots here and i need to select all that’s the easiest way to make sure that every icon you’ve imported is selected and then i’m going to go down to generate svg and more i’m going to click on that and then on this screen i’m going to choose preferences i’m going to change this to business icons and then i’m going to click this boxes add title to definitions and then i’m going to remove the png formats and then i can just close that box i’m going to hit download a download my svg and i’m going to save now we’re still not done in my right folder this one we’re going to save it. Alright so business icons let’s go inspect what we’ve done there so we have right and we have the zip file called business icons i’m going to go ahead and unzip that there’s only one file in here that you actually need and it’s the symbol dash depths file now you cannot just upload this file into oxygen and expect things to work if the icons will work but you will not be able to customize the colors and that’s because of another step that needs to happen now unfortunately this involves a little bit of code that not actually writing code just removing some code but you do need a code editor thankfully there’s tons and tons of free ones okay i’m going to use vscode so i’m going to down i’m going to drag this down to vscode and it’s going to open this symbol dash depths file i’m going to show you how easy this is don’t get scared don’t start running away don’t pull the cut covers over your head right now okay just pay attention this is very very simple vscode by the way is free so if you want to do this exactly like i’m doing it you can use vscode no problem. so i’m going to select this fill basically what’s happening here is it’s inserting a fill color and a style and that’s basically in line code and in line code takes precedence over classes so if you’re trying to add a class to your icons to change the color you’re not going to be able to do that because there’s a in line color already attached to these icons so i’m going to grab fill and style and the extra space that’s going to be in there and i’m going to copy this then i’m going to click out and i’m going to hit command a on my keyboard i want to select all of the code that’s in the symbol dash depths svg file and i’m going to go up to edit and i’m going to go to replace and then i’m going to find i’m going to paste there i’m going to find all instances of that strip of code right and what do i want to do i want to replace them with nothing i want to remove them so in the replace i’m just going to leave replace blank and i’m going to hit this button this is replace all and there you go it’s removed that in line fill and and style from all of my icons now i hit save and my file is correct now so if i go back this symbols dash depth file is now formatted properly so what i can do is i can go into oxygen i’m going to delete that little icon we’re going to copy and paste that one and i’m going to just save this for a second we’re going to go back to our admin area and i’m going to go over to oxygen settings so oxygen settings i’m going to go to svgs sets and i’m going to name this business icons i’m going to browse i’m going to go to business icons symbol dash depths that’s the one that i edited so that’s all prepared and ready to go and i’m going to open and then i’m going to import the svgs set i’m now going to go back over to my builder and refresh the builder because obviously the builder does not have the changes yet it doesn’t have it doesn’t know the new icons that exists there we go so now i’m going to do is go down to my icon and instead of i concept font awesome i can choose business icons and remove the thumbs up because that’s irrelevant and now i can do is change it to any of my custom icons and i can change the size maybe we want this to be 60 all right perfect i’m going to come over here i’m going to say that this is a business icon and it’s going to be this one and then i’m going to choose this and okay font awesome goes to business icons and i’m going to choose this timer thingy and then i’m going to change this to business icons and we’re going to use the graph i’m going to change this to business icons and i’m going to use the money i’m going to change this one and i’m going to use the light bulb okay so now i’m going to save so we can see i have all of my custom icons being used and now i have full control over them so the client comes and they’re like oh well we need all these icons to be the secondary color our brand secondary color okay so card icon change primary to secondary and now we have a brand new color right they’ve all changed color i can control the size of all of them just like that now there are some issues with the icon with and height and things like that if you look at you inspect your illustrator file it really depends on how the icon set was designed in that case right you can see that the best designers will design pixel perfect icons which are the basically the same width and height you can kind of get around this by putting them all in a box this goes back to maybe preparing the icons as a designer now if you’re looking at the developer and you need to do this on the fly like i’m capable of doing it but it is extra work and it’s kind of outside the scope of this tutorial but there is a way to ensure that all of these icons are exactly the same size at least the same height is typically the way that you want to go at the width doesn’t really matter but the height does matter because if one of these is taller it’s going to push the text down right you can probably put a max height or midnight or something like that on them there’s a lot of different ways to solve those challenges but what I wanted to teach you in this tutorial is how you should be using and managing custom icons inside of oxygen by the way these the width and height issue you’re going to run into that with with any of the you know systems that people use whether using images or you’re using code blocks or what have you but this is the way you need to go about doing it so kind of a recap here what did we do we have to convert or make sure that our icons are SVGs we have to make sure let me go back to let me go back to camera here whoops oh I was clicking on mad stuff now okay so you have to make sure that you have SVGs to start with you also have to make sure that those SVGs are formatted properly which means they’re not using strokes they’re using fills and I showed you how to convert from strokes to fills if you get SVGs that are not formatted properly next you need to upload them to icon moon you need to you know click the little settings and icon moon to get your zip file download then you need to open symbols that’s deaths you need to edit that to remove any in line styling so if there’s fills or strokes or any of that stuff in those you need to do that’s going to render them not scalable when you try to import them into oxygen so by removing that in line code before you import into oxygen you have completely clean SVG icons that you can now control the color of you can control the size of and you can choose them like if you’re going to develop a new page and you’re like man I need that uh that what was it timer icon okay so you find the timer icon you just add an icon you look in the panel over there in your icon set find the time or insert it you’re good to go better than the media library way better than code blocks right this is the method that you should be using if you have any questions definitely let me know drop a comment below if you found value in this video if you think this solve a big problem for you definitely hit the thumbs up definitely make sure you are subscribed because there’s so much more to come hit the notification bell as always when you subscribe so you make sure that I don’t get drowned out by the name of the person who is watching the video I don’t get drowned out by that’s my alarm to go to jiu jitsu to make sure I don’t get drowned out by all the other noise on YouTube right hit that notification bell I love you guys hopefully hopefully hopefully this really helps you I’ll be back very very soon peace