Hey, welcome back. My name is Kevin, and in today’s training, I’m going to teach you how to create
a custom icon list. And the technique that I’m going to show you is very flexible.
It has a lot of unique advantages over some other techniques that you might see for doing custom
icon lists. And this is one of those trainings where even if you don’t need a custom icon list
right this second, it’s a good training to watch because you’re going to learn a lot of really
valuable stuff along the way. And then, of course, when you do need a custom icon list,
you’ll remember this training. You’ll be able to come back and find it. Okay. This should be nice
and short and sweet and concise. Let’s go ahead and dive in. So I am going to start by adding a section,
which is also going to give me a container. And in that container, I am going to add a rich text element.
This is actually one of the advantages of this technique. In past trainings, you’ve probably
seen me create lists using divs and blocks and changing the HTML tags manually and all this stuff.
And it’s a bit of a hassle, right? Using this technique that I’m showing you today,
you don’t have to worry about any of that. Just add a rich text block. And then in that rich text block,
click this icon right here for bulleted lists. And then we’re going to be able to say list item one.
I’m going to go ahead and copy this text. Two, three. Oh, oh dear. It also copied a line break,
apparently. Okay. Three, four, five. And then I’ll just change the numbers. Two, three, four,
four, and five. Now let’s take a little journey to the front end. And I want to inspect this with you
so you can understand the structure that this is adding to the page. And there’s one little detail
that you do have to keep in mind. Okay. So here is your unordered list, very clean HTML,
but it is in a wrapper because we use the rich text element. That’s going to create a div.
And your list is actually going to be inside of that div. And when we do our styling and all of
our CSS stuff, that’s an important detail to know. Okay. Otherwise things that you do may not work and
you may not know why they’re not, why they’re not working. It’s going to come down to structure.
Okay. All right. Let’s hop back. What is the first thing we need to do? Well,
we want to take all the styling that we’re going to do here and we want to assign it to a class so that
we can use this wherever we want. Okay. So I’m going to say my list, just like that.
The first thing that I want to do is I want to get rid of the bullets. We’re doing custom icons.
Okay. If we’re doing custom icons, we don’t need bullets. I also want to get rid of this padding
right here. Okay. So I’m going to go over to style CSS. I’m going to say root, but again,
I’m going to target the UL because I’m not trying to do this on my list. I’m trying to do it on the
actual list, which is a child of my list. And it is, I’m just going to target the UL
off of this class. Okay. So what we’re going to do first is list style, none, list style,
none, we’ll get rid of the bullets. The next thing I’m going to do is padding. And I’m just going to
say zero for right now. Now I’m going to do things the functional way. Okay. Where it’s like,
just get it to work. And then we’re actually going to loop back around and we’re going to framework
it a little bit, make it more scalable, make it more maintainable, improve things,
and then we’ll be done. All right. Next thing that we’re going to do, we need our custom icon,
or at least a placeholder for our custom icon to show up here somewhere. And we’re going to use a
pseudo element to do that, a before pseudo element. So I’m going to say root, and then I’m going to say
LI. So I’m going to target the list item because the, again, go back to the structure. You have your UL,
which is like the container for your list. And then you have everything in a list item. The list
item is what needs the icon. Okay. So just like it had a bullet, it needs the icon. Okay. So we’re
going to say root LI before. Now, when you’re doing a pseudo element, you cannot get the pseudo element
to appear unless you use the content field. Now we aren’t going to actually put anything in this
content field, but it still has to be there. So I’m just going to say, you know, the open quotes
and close quotes blank, leave it just like this. And that’s essentially no value,
but it satisfies the requirement for the content field. Now, the next thing is I want to give this
box a display property. Let’s start there. Let’s just do display flex. And I want to give it some
dimension, right? So let’s give it a width of 1M and a height of 1M. All right. You can do pixels.
You can do whatever, but you know, we’re going to come back and change this anyway. So it doesn’t
really matter right now. And then maybe I should give it a background color. Okay. So we’ll say
background and we’ll just say background red. Okay. So just get a red box on the page. All right.
The next thing that I want to do, you’re going to notice the red box is above the list item text.
Okay. We want to get those to be in alignment. So what I’m going to do here is root and I’m going to
say LI, and then I’m going to show you how to nest this. Okay. Why don’t we actually do the nesting
right now? So we don’t forget. So I’m going to take this. Okay. Root LI. I can do things to root LI,
but I can also come in here in the middle of this and I can use an ampersand to essentially reference
this selector and add the before. And now all the things that I’m doing, let me indent this.
All the things that I’m doing are kind of self-contained. Okay. Which is very nice. Okay. So,
what do I want to do here? I can use flex. I can say display flex, flex direction row. I put these,
you know, side by side, or I can use a grid technique. I am going to use the grid technique.
I prefer the grid technique. The flex technique, it can get a little tricky because as your list item
text grows, you might find that your icon starts to shrink and then your icons are all different
sizes. And they’re not really respecting the width and height because of how flex works,
unless you override that and know what’s happening and all. Okay. We get that. You can actually just
avoid that situation altogether and make this nice and clean by using grid instead. And here’s how you
do it. So you say display grid. So I’m taking the LI display grid. Now, when you display something as
grid, it’s going to want to know what is your grid template columns instruction. Okay. So I’m going to say
auto is the first column. Auto is the first column. And then one FR is the second column, but it’s safer
to do a min max zero one FR. So you use a min max function zero one FR, a little bit safer than just using
one FR by itself. This eliminates the possibility of any overflows or anything like that. Okay. So that now you
can see my red box is next to my list item. However, you are noticing that because of line height and things
like that, the icon is not perfectly aligned. What we don’t want to do is we don’t want to use flex
to center align this or vertically align the icon. Because when you have multi-line list item text,
that’s going to look terrible. What we want, or as Charles Barkley says, terrible. That’s terrible.
Okay. What we want to do is we want to just nudge the icon down to be in perfect alignment with the first
line of the list item text. So the way that we’re going to do that, remember that is the,
the red box is the before pseudo element. Okay. So I’m just going to come down here to translate.
And if I do minus 50%, minus 50%, you’re going to see what happens. It went left first,
then it went up. Okay. That means this is the inline axis value. And this is the block axis value,
right? The inline axis. I don’t need it to move inline at all. I don’t want to translate it at all
inline. Okay. I want to translate it on the block axis, maybe like three pixels or something like that.
Maybe four pixels. Let’s see. That looks about perfect for this text right here. Okay. You can also come in
and use like EX values, which are going to be a little bit more accurate to the actual text,
because that’s like a, a height measurement of the actual text. So feel free to experiment with that
as well. All right. The next thing that I need is I need space between my box and my list item text.
Okay. The way I’m going to do that, since I’m already using grid here is to just use gap. So I can say
gap 0.5 M that’s going to give me some spacing there. I prefer gap because gap is an intelligent
method of spacing. You know, if you do margin or padding, you’re going to have to say, well,
put that on the right or put that on the left or gap is not directional. Gap just says, oh,
you’ve got things and you want space between them. Okay. Done deal. Right. So it’s just a much more
intelligent way of adding spacing. Okay. Well, this is ready for our custom icon at this point. So what I’m
going to do is I’m going to save, I’m going to open a new tab. This is the unfortunate side of,
you know, how the WordPress system works where you’re using a page builder. Now you got to go
back into WP admin and it’s not a unified experience. This will all of course be fixed by etch at etchwp.com.
All right. This is a shameless plug. It gave me an opportunity every time, every time I got to go to
a magic area, it’s going to give me an opportunity to point out that this is not going to happen in etch.
In etch, you were going to be able to do all of your work in that unified environment and not have
to bounce around like this, but etch doesn’t, it’s not here yet. So we do have to play the bounce
around game. So I got to go to media. I’m going to find my icon. In fact, do I even have an icon?
Okay. Yeah. I’m going to use these two right here. So I’m going to use a check mark and an alert.
And I want to do this to show you that you can easily control the color of your icons,
even though I don’t have multicolored icons in here. Just, they’re just black. I can easily control
the icon size. I can easily control the actual icon. I can swap the icons. It’s very easy to do.
So just follow along. I’m going to open this up. I’m going to grab the relative path to the icon.
So here’s what we’re going to do. We are going to replace the red box. Actually,
we’re not going to replace the red box. We’re going to do a little bit of a trick.
We’re going to take our icon and because we want to control the color. Well, you know,
why don’t we replace the red box and I’ll show you why you don’t actually want to replace the red box.
Okay. So let’s, instead of background red, let’s do background URL and pop in our icon.
And then you can see it’s clearly cutting it off. So let’s go background size of cover.
Now that’s at a, that looks like we just checked the box. Like, you know, pun intended,
like we’re good to go, right? No, you would not want to do it this way because you can’t control
the color of the icon. Okay. Bad, bad idea. So what we actually want to do, what’s great about the
background properties is they’re interchangeable for the mask image properties. It’s very fun. Okay.
So if I take this background color and say red, and then I use instead of background,
something called mask image. And instead of background size, mask size, look what happens.
Essentially we’re taking the icon and we’re cutting the icon shape out of the red box that
we had. And this is giving us the ability to now to come in and say green or blue or
Rebecca purple. Okay. Of course we run use color tokens here, but you get the point. I can, I can,
I had a black icon that I started with and now I could freely change the color of it using this mask
technique. Now, one thing you need to know about the mask technique, the mask image property doesn’t work
across all browsers unless you prefix it. So we have to prefix it with web kit mask image. You need
both of those there. And then you can see some duplication here and you can see that this is
not going to be super friendly for managing multiple URLs. So what we need to do here is we need to go
one step further and start to framework this a little bit, start to tokenize everything, start to make it a
little bit more maintainable and scalable. So to do this, I’m going to come up here with a new root value
or root selector, I should say. And I’m going to say icon URL. This is going to be the first thing
that I do. And I’m going to grab the URL, paste it right there. And now I’m, and many of you, you,
you probably didn’t even know this might be blowing your mind right now. Okay. Kevin, I had no idea.
You could take that URL function and tokenize that whole URL. Yeah, you absolutely can. It’s fantastic.
Which allows me to come down here and I could say var icon, not without, not, not with the zero. Okay.
Icon URL. And then I could take this and I can replace that. And now I have one token and this is
actually going to make this really easy to just swap icons out. It’s going to be so fantastic. You’re,
you’re not going to believe your eyes. Okay. Next thing I’m going to do is say icon color right there,
which I can now define up here. I’m going to say icon color, and now I’m going to use my actual color
tokens. Okay. So I want this to be primary colored. What else do we want to do? So we can do the icon
offset. Icon offset. We’re going to take the 0.5 pixels, drop that in there. We’re going to call this
icon offset. And what else can we tokenize? All right. So the width and the height, that’s the icon size,
icon size, 1M. And I could come in here and say icon size. Fantastic. We’ll put that there as well.
Okay. So got that done. What else do we want to tokenize? The icon spacing. Okay. Or icon gap,
we’ll call it. That’s going to be 0.5M. We can replace that right here. Var icon gap. Don’t leave,
by the way, I’m going to show you the most important part of this is the ability to swap out icons. Okay.
Okay. All right. What else? Oh, and the ability to maybe recolor icons on the fly. All right. So let’s
see. Root LI, content display. Oh, display. Okay. Icon display. And this is very, you know, helpful when
you want to go from flex to none, for example. Maybe if you wanted to hide the icon in certain situations,
that could be a possibility. We’re going to say flex there. Display is going to be icon display.
Fantastic. So we’ve got content is good. Good, good. Mass size cover. That’s all fine. Grid template
columns is never really going to change. Display. That’s all good. How about, how about list indent?
Okay. We’ll say this is going to be 0, but I can come right here to this padding and say list. And
actually, you know, would I want to use, let’s just do padding 0. I would probably want to do margin
inline start, which is margin left. This would probably be where I want to put my list indent,
right? And we could say like 1M and, oh, you know what? Nope. Hold on. I’ve misspelled that.
There you go. So now I have a list indent as an option. I’m going to set that back to 0, of course.
I want to also swap some of these things out, like width and height with logical properties to modernize
the CSS a little bit. So width is actually inline size and height is block size. Okay. Fantastic.
This is looking really, really good. So we’re starting to framework this. We’re starting to
modernize the CSS. We’re making everything nice and tight and concise and clean. Okay. Now we want
to handle swapping the icon. So what I’m going to do is I’m going to go back to my rich text here. I’m
going to expand this a little bit. I’m going to click this text tab and I’m going to reveal the HTML
code. That’s what’s great about this rich text element. You can reveal the HTML code. And on this
LI right here, I’m going to say data icon equals, and I’m going to just say, I could describe it. Okay.
So I’m going to say cancel. Okay. Data icon equals cancel. Now, what can I do with this? Well, I can go
back here and I can grab this other icon URL. Actually, this is not a cancel icon. I don’t know why I chose
cancel. Let’s do alert. Okay. Data icon equals alert. Cause that’s what this icon is right here. I’m
going to grab the relative path bang. And I’m going to come back and remember data icon alert. That’s
critical. Let’s go to the CSS. We’re going to come down, uh, under my list. Okay. We’ll just make a new
one. Um, so it’s root and then data icon equals, and this is how you select attributes is using
the closed, the, the, uh, brackets. Okay. So data icon equals alert. I can come in and I can say,
I do I have to, do I have to do all this fancy stuff again? No, because I tokenized everything. I can just
say icon URL, give the icon URL a new value. So URL, and then in that function paste and look at what
that list item three turns into. It turns into the alert icon and you can even do other stuff here. Like,
um, we, we could say that this is going to be the danger color. Okay. Icon color danger, right?
It’s danger. I get, I get, I get, I can say, uh, opacity. In fact, maybe I want to come in
and say opacity is icon opacity. I could create a new one. The default of which would be one.
And then I could come in and I could just say icon opacity 0.5. And now it is, uh, it, oh,
you know what? I don’t want to do that here. I want to do that, uh, the LI. Okay. And this wouldn’t
be icon opacity. This would be a list item opacity or something like that. Okay. List item opacity.
List item opacity 0.5. All right. Fantastic. So I can just say, there you go right there. Um,
and then you could even do, you can still, of course, add an icon opacity here. This gives
you independent control over the icon opacity and the list item opacity. And I could come in here and say,
icon opacity is one. Um, so we’re just, we’re frameworking this a little bit. We’re expanding,
but look how easy this is to, I could create a bunch of these, right? You could have a bunch of these
different options. You could also have, um, you could also have like a, my list, uh, neutral.
Okay. So here’s a double dash neutral. And then when you come down here, you say, uh, my list.
Oh, it’s, you know what? It’s, it’s pretending like I’m still on this class when I’m viewing the CSS.
Actually, I don’t know why it’s doing that. I think bricks is having a little bit of a hiccup here.
Let’s refresh it and let’s come back and let’s find my list neutral CSS. Okay. That’s weird. That,
that is, that is a little bit weird. I don’t, I don’t know why that’s happening. Uh, it should be
showing me, it should be showing me a blank slate for my list neutral because, uh, I put all this
attached to my list, not my list neutral. I don’t, I don’t know what bricks is doing here.
Um, but we come down here. We’ll just, we’ll just see if we’ll just see if this works. Okay.
My list neutral icon color is neutral. Okay. And it is going to make it that now I can take this off.
Maybe. Yeah. Okay. Yeah. I don’t know. It’s just weird what it’s, what it’s showing me,
but you could create utility classes for quickly changing the color on the fly.
You could actually do this with data attributes on individual list items as well, like data icon
color equals neutral. And now you just do exactly what we did down here. Um, with the data icon
attribute, you could just add another one in that changes the icon color. So flexible, so tremendously
flexible and scalable and maintainable, but we accomplished the goal. We got our custom icons.
We can change the color of the icons. We can swap the icons. And you know what the best thing is?
We’re managing all of this with the rich text element. We don’t have to manually manage all
of this stuff in the structure panel. It’s very quick to add new list items. I mean, look how I
could just go bang, bang, bang, bang, bang, just add more, right? Let’s just copy this. You can see.
Okay. There’s another one, another one. I mean, look at all these and then any one of them,
I could go in and say, you know, data icon equals alert and make this one an alert. Very easy to manage these.
Okay. Uh, very quick to manage them. It’s a very clean approach. This is, if I was going to create
a custom icon list and I wanted all of the, these possibilities, this is the approach that I would
take. And if you’re an automatic CSS user, I’m working on baking this approach into the existing icon
framework. The icon framework was initially built for managing SVGs, right? You can actually add SVGs to
the page, style them with the icon framework. I’m going to be adding this kind of functionality in
so that you can do it either way, which obviously when you can do it either way, you have the utmost
flexibility, but that’s going to be it for this tutorial. We’re going to put this one in the books.
If you liked it, if you got a lot of value out of it, click the like button, please. The videos don’t
like themselves. You have to do that part and then drop a comment below and let me know, um, you know,
are you going to use it? Are you going to test it out? Are you going to follow along? Did you learn
something new as we worked our, our way to the final solution? Uh, well, that’s a, that’s, that’s,
uh, worked our way to the final solution. That’s yeah. All right. Let’s cut it there. I love you guys.
Subscribe to the channel and I’ll see you again very soon. Peace.
