Do you want to add free icons to your WordPress website? You don’t even need a plugin. Watch Kori Ashton show you how the use the default icons already inside your WordPress dashboard. Here’s the link to Dashicons.
If you’re looking for even more icon options – check out the Font Awesome WordPress Plugin – https://wordpress.org/plugins/font-awesome/
You can use either of these plugins for Free to add icons to your website giving it a good WOW factor!
Full Transcript
Hey everyone, my name is Kori Ashton, and welcome to another WordPress Wednesday. You have found a YouTube channel dedicated to all things WordPress. Today we’re gonna be looking at how to add in easily and quickly, icons to your WordPress website. So let’s say that you want to have some different options, maybe next to a text, and you’re tired of using images, you wanna just bring a little bit more attention though and you don’t just wanna leave just text. How do you put a li’l icon next to it or above it or around it? I’m gonna show you right now, all in the budget of free.
Liquid Web
This tutorial’s brought to you by Liquid Web, the most helpful humans in hosting. They truly are, they’re not just about your server, they’re not just about your invoice, they really are about helping you, so if you have issues at all, with conflicts with plugins, theme issues, server issues, security issues, they’re ready to answer your questions, be sure to reach out to ’em, and use the coupon code right there to save you some money.
All right y’all, let’s get to the tutorial. And if you’re interested in my health journey, please stick around at the end of this, I’ll talk to you more about my journey with cervical cancer.
Default Divi Icons
Here’s just a quick example of some icons that I use on my website. These come by default though inside the Divi Builder, so if you’re using a page builder, look for icons already inside of there, there’s a WordPress icon, kind of a graph, thumbs up, and a light bulb. All four of these kind of bring extra attention to this space.
More Icons Available
If you’re trying do something like that, did you know that WordPress actually already has icons, by default, living inside your WordPress website. You have all of these different options, that just with a little bit of code to copy and paste, you don’t have to write anything, you just copy it on your clipboard, paste it in your WordPress website, you can use any of these right now, in this moment, today.
We can drop these in and put them anywhere you want, make them as large as you want, as small as you want, put a phone next to your phone number, do whatever you need to do to use these icons.
Now if these aren’t enough, if you’re thinking gosh, y’know, that’s cool, but that’s not really the icon I was looking for, of course there’s Font Awesome. There is a plugin that you can add to your WordPress website to get more unique-looking icons, something different and vast, they have literally hundreds of different icons that you can come here and choose from. That is an option as well.
I’m gonna show you right now how to use both.
Free Icons at Dashicons
I’ll show you by default how to use the Dashicons that live already inside your WordPress website right now, and then, we’ll do a quick search and I’ll show you the Font Awesome plugin. Let’s go do it. This is the little quick example I’m gonna be using right now, you can see here, I have A Cheerful Headline, and right next to it a little smiley face, just something to stand off the page. You can use any of these icons though, remember, okay?
So this is the Dashicon smiley that I have there right now, you can see, I’m in the Text mode instead of the Visual mode, and that’s where you’ll wanna be to copy and paste any of these icons into place. So, let’s say we wanted the WordPress icon. We can come here to this page, I’ll put the link to this in the description box below, come here, you’re gonna choose the icon you want after you’ve done a little quick filter, lemme show you that again.
I’ve landed on the page, there’s a filter box right here. I’m gonna start typing in what I’m looking for. I’m looking for WordPress. They already filtered it for me, here’s two different options that we have for WordPress. If I choose the one I want, it’s gonna change up here at the top of the page, and then check this out right here, it says Copy HTML. I’m gonna click on that, it’s gonna open up this nice little window, I’m gonna be able to copy that onto my clipboard, and that’s all I need. I don’t have to write anything, I just need to copy that onto my clipboard.
Come back to my page, and wherever I want that icon to live, I’m gonna paste that in there. So right now I have that smiley face in there, I’m gonna back that out, and I’m gonna add in this span tag in here, paste it from my clipboard. You see, it’s got a span class dashicons, that’s the name of our plugin, or our default option, dashicons-wordpress, and then it closes my span tag. And then I have a little bit of a space because I don’t want it right up next to my headline, and so I’m gonna save draft right now. That’ll change it from having that smiley face to now having the WordPress icon next to it, right, and let’s preview that and show you what it looks like.
Here it is, perfectly positioned right next to it, and that of course is fully responsive, it’ll stack beautifully. You can do this with a phone, let’s say that you wanna add a phone icon next to your phone number. You know, let’s come here and do a quick search for phone, oops, if you spell it correctly it’ll find it a lot faster.
There ya go, here’s a nice little phone right here, so we can use that one, and when you click Copy HTML, see it’s gonna open up and it’s gonna tell you, it’s dashicons, dashicons-phone.
That’s all it needs, so you can copy that on your clipboard, come back over here, and change it out, change it to whatever you want it to be there, phone, save draft of course because you wanna be sure to override it, if you’re having caching issues and you can’t see your changes, that can be some of it right there, and then click Preview Page.
There you go, a nice little phone icon for you. Any of these are available to you right now, no plugin needed, anything you want, you can come here and check these out, and scroll through and use any of these today, right now.
Font Awesome
Let’s say that that’s just not enough though and you wanna figure out, okay, how do I use Font Awesome? Let’s go into your dashboard, and we’re gonna go to the Plugins area. Click Add New, and we’re gonna come right over here to Search plugins, and you’re gonna look up Font Awesome. And of course, there it is, right here, this little blue flag, Font Awesome. Course it has a lot of active installs, it’s compatible with my version of WordPress, so as long as those are correct still, you can come here and click Install Now, and walk through their process of using Font Awesome inside your WordPress website. Click Activate.
So now that that is installed, you can actually go over to Font Awesome, search for any icon that you want, and then grab their HTML, right? So you’re gonna click on the HTML, you’re gonna come back to your WordPress website, paste it in anywhere you want, it’s gonna be a little different, it’s not gonna have the span class, it’s gonna have an i for an icon class, and it’ll have their call for their specific icon.
Click Save Draft, just so you can preview this, you never really wanna publish anything until you’ve previewed it, make sure it looks good, make sure the icon’s appearing the size you want it to be, and the placement you want it to have. This one looks like it’s right up against my headline so maybe I’m gonna add another space in there, click Save Draft so that the fish is a little bit of a distance, you know, at least a space from the Cheerful Headline.
Now you can preview the page, and there ya go, Font Awesome is workin’ on my website, just like that, a nice little icon. Easy enough as long as you’ve activated that plugin, it should work perfectly for you. It’s pretty great, right, you can add icons and get as creative as you can be, and people love them.
Remember that the size of the icon is based on where you’re putting it, so if you’re putting it inside of a header tag, an h1 or an h2, it’s gonna be that same size font.
If you’re putting it just inside of a paragraph text, it’ll be the same size as whatever text you have in that space, so it’d be nice and uniform.
I hope this has helped y’all, and I hope y’all are havin’ a great WordPress Wednesday. Be sure to subscribe to my channel, because every week, I’m creating videos just like this to help you improve your online marketing inside of the world of WordPress, and if you’re looking for more help, be sure to check out Liquid Web. These folks are really helpful when it comes to anything beyond WordPress, hosting even, they will help you with server issues, security issues, plugin issues, they’re there to be your WordPress support. Holler at ’em and let ’em know Kori Ashton sent you their way.
All right, see y’all next time, bye everyone.
Health Update
Hey y’all, thanks for stickin’ around to find out about my health journey. I have completed my intense surgery. There were 26 needles and rods, they’re called rods, into my cervix for internal radiation as I’m battling this cervical cancer, so I was laid on my back for four days in this process as they pumped radiation into the tumor. With my external radiation and chemo that I’ve already had in these last four months, I have, the tumor only shrunk about 30%. So I’ll take that, that’s amazing, it’s starting to die.
We want to just keep pumping as much as we can into it. I’m on the keto diet trying be sure that my diet’s in place, I’m trying to minimize my stress level, and all of that is a part of your encouragement. Every single one of you have been so kind to leave me messages, comments, tweets, DMs, emails, y’all sent me gifts, cards, it’s been amazing.
Thank you so much for all the encouragement, as I’m working my way back into the studio and back just into life in general. I’ll know in about another 30 days whether or not I’m cancer-free, so please lift me up in your prayers and your thoughts. I need all I can get. I will catch up with y’all and give you more updates on the journey as I have them. I hope y’all are havin’ a great week. Thank you again for all the encouragement, y’all, you’re so kind. I’ll see y’all next time, bye everyone.
