Divi WordPress Theme How To Add Font Awesome Icons To Number Counters

Divi WordPress Theme How To Add Font Awesome Icons To Number Counters

October 3, 2019 2 By Bernardo Ryan


hi guys and welcome to another Divi
WordPress tutorial this is Jamie from https://www.system22.net and http://web-design-and-tech-tips.com/
well we’ve had another question on one of our videos and I’ve got a viewer that
wants to I had font awesome to the left hand side of some numbered
counters now I’ve got fum also installed on this site and for those of you that
don’t know what it is I’ll put this link below the video this is the font awesome
site and it’s a bunch of web fonts that you can use for your web sites and they
are as the name says here absolutely awesome so I’ll show you how to do this
and like I say I put this link below the cheat sheet which has got them all on
there and I’ve done a previous video on font
awesome you want to look at that if you want to see how to integrate it in there
I’ll put that link below also but just to briefly cover it if you go to your
theme options down to Divi theme options over to the integration tab
you want to put the the fun awesome stylesheet link in the head of your blog
over here and to get that on this page just hit the start and that’ll take you to a link that’s
got that code there for you so you just copy that code put it into your head of
your Divi theme here and under the integration tab and you’re good to go so
let’s get back there and see what we can do for those of you that don’t know Divi
is just a fantastic theme I’ve built hundreds and hundreds of sites with it
it just keeps getting better and better with more and more features if you’re
building any sort of WordPress site at all I would suggest you take a look at
it it’s it really is great and you can demo it out for my affiliate link below
this video so I’m going to enable my visual builder and once it’s enabled or go down and
let’s create another row just create one right here I guess click
on the little blue button add a new section and put a new row in it call it
a regular section and let’s put a row for in there that’s
the example that he was asking had for so I’ll do four here
and inside let’s put a number number counter this what we’re gonna do here is
gonna work the same for circle counters or anything else really and we’re gonna
be using a bit of CSS to place it in there so what am I looking for a number
counter there we are so there is a standard number counter
element and what he wants to do is place a
little font awesome beside it here
so let’s secrete a design let’s align it to the left that’s fine and we’ll just take that number text
down a little bit in size it’s pretty big which is fine because you want
people to see it and lets me make it black
think there Oh 50 pics
like that there we go we’ll leave it at that let’s
take the percentage off give it up
number you you so elements and take that percentage
sign off back to our content
okay I’ll just write Ivan our project SPECT number 250 a little bit bigger for
effect alright so we got a little number
counter going on there which is fine you Texas make that all caps there we go so
I’ve made it all caps just using that and again we’ll make that black as well
don’t know if we need to make it any bolder try it sort of semi bowl yeah that’s that a bit more okay so what
we want to do we want to add a font awesome just over here to the left of it
so it’s still part of this actual element here
so let’s go to our cheat sheet for fun awesome and find one that we want to use
if you know what you want to use you can just type something in here like clock and it will find the clock for you or
ones that match that so Wow while we’re here why don’t we just use this one I’m
going to click on it and there’s our little code we won the
unicode so f zero one seven armies will copy it I’ve copied it now we’re gonna
have to use a bit of CSS let’s go back to our site you Advanced tab and we’ll go to the custom
CSS and we want to use the before block right here because we’re going to insert
it before the actual element so the first thing we want to do I’m
gonna write content and again I’ll put this CSS below the video so if you can’t
read it properly on screen you can just copy it and use it from their content :
want to open some inverted commas there and just paste in our little shortcode need to put a backslash in front of that so we got a backslash in that short code
now we’re gonna define tell it that it’s font family is fun awesome there’s a single font
awesome so as you can see now we define that
that little clock has appeared up there semicolon but that’s not what when it we
don’t want it on the top so again we’ll make it blue we’ll make it black at the
moment is gray so we say color black and we’ll give it a size font size let’s
make it pretty big say 50 pixels there we go that’s a pretty big font right
there and obviously you make it bigger than that if you want to fontsize for
two pixels we’ve got to tell it because we want to
push it over here so we want to tell it position absolute position an absolute
baby chatter a cheeky lot of this it prompts you for up there I’m so used to
writing it though I forget to click on the prompt and where do we want now
we’ve got to tell it where we wanted to actually go so let’s say we want to go
left 15 picks on the left so we’ll say minus 15 pixels it’s not gonna do it’s not gonna be
enough I don’t think that’s just try 25 still not enough
let’s make it 45 actually plenty yeah maybe not 55 as you
can see as I’m going up it’s going over to the left there all right now we want
to drop it down so how far from the top do we want it
we’ll probably want it at least 50 pixels from the top maybe more top if I spell it right top : say 50
pictures that’s dropped it down to the middle there that’s kind of getting to
where we want it I think let’s make it a little bigger course we’ll have to readjust this to you yeah that’s about right
a little bit more even it’s okay it’s kind of in the middle do
we want it lined up with the bottom or we’re gonna line up the top that’s up to
you and just take it down some more if you do
let’s try so that’s almost pretty much lined up
there I’d rather have it kind of in the middle so say 50 pixels like that
and now we really want to shift the whole thing across this is out of its
little box here so we want to move it a margin of some sort so let’s go to our design and spacing give it a margin on the left 70 pixels because we’ve kind of pushed
it over by 70 so let’s try something pictures you
you wants to be a little bit more just a
little bit more let’s click on our little arrows here
and pull it across them until we’re happy with where it wants to be you okay so that works let’s make it a
little more interesting let’s make that a different color
and let’s make our number a different color as well I don’t know what
to our CSS make our font why not let’s make it powerful okay
make our number number we can do in our design here
number text and let’s make our number blue why not
there we go with a little colored section here there it is that’s how you
do it that’s how you make your add a font awesome it’s the left hand side of
whatever it is you’re doing here of course all you need to do say that this and right next door
you and of course all we need to do is
change it up whatever it is you want to say people let’s make any bigger number and change our font let’s go to our
cheat sheet right here scoop back one
or we can just put in another search here we are that one right there users I
see that one quite a lot there’s our little
short code or unicode click and we’ve copied that let’s go back to our site
now we want to go to our CSS and all I do is paste that on in there and we’ve got our people there
and that looks a little bit big to me so we can reduce that one they don’t all
have to be the same size you about 65 that should do it yeah oh there okay so that’s how you do
it I hope that answers your question then obviously you just copy these
across and keep changing it up and you’ve got a four in a row let’s just
quickly view that same thing let’s just quickly copy this one over drag it by its little handle with a
little cross there another little icon a wrench
you you copy our little shortcode they’re copied
back to our site over to our custom CSS pasted in there that’s fine now what are content and that services you and it’s the last one and we’ve got a
whole row there let’s clone it with a little squares
drag it over with a little cross you a little icon why not
I’ll be fine click the copy back to our site
cog advanced custom.css before pasted in there make sure you don’t
check off that backspace and knock off that little backspace there or any other
inverted commas because it will not work in that work yeah there’s our little
computer you well so they have it let’s save our
changes now we got our little checkmark
exit the visual builder you and there we have it there’s our little
row with our font autumns on the left hand
side of our number counters there fresh that yep just to make sure the numbers are
going to work fine make sure it’s responsive I’m using
Chrome here I’m going to hit my f12 and hit the responsive key yeah they seem to work fine that’s on
tablet and here we are on phone sighs see iPhone course you may
want to do another one or it’s up to you that’s not too bad or
another section like we did in the last video that displays on your mobile
phones where you have it centrally but that’s entirely up to you so that seems
to work absolutely fine get rid of that back to the site so there you have it
that is how you put your font autumn’s to the left of your number counters I
hope you found that useful if you have please give the video a thumbs up share
it and subscribe to our YouTube channel if you’re interested in web development
take a look below we’ve got some great free courses down there also some
premium courses with some huge discounts for our YouTube subscribers so do take a
look once again this has been jamie from system 22 and web design and tech tips
comm thanks for watching have a great day