- 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.
(inspirational music)
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.
(claps)
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.
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.
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.
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.
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.
(happy music)
(bell tinkles)
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.