April 8, 2020
Divi 3 How to Import And Use The Elegant Icon Font Set

Divi 3 How to Import And Use The Elegant Icon Font Set

hi guys and welcome to another Divi
WordPress theme tutorial this is Jamie from system 22 and web designer tech
tips calm well if you’ve been following any of
these videos recently we’ve been just playing around with this site creating a
few hover effects and what-have-you and like I said a thousand times before Divi
just keeps getting better and better if you building any sort of wordpress site
check out the Divi theme you can try it out from a link below this video and
it’s so versatile it’s just no brainer basically if you’re building with
WordPress but they’ve done it again they brought out a new great feature and it’s
free they’ve got their icon font set and you don’t actually have to use this just
for the Divi theme you can use it with anything you want and it’s free to
download you just have to go to the elegance theme site for their blog there
you probably have to join and download but it’s not going to cost you anything
and then you can use all these beautiful fonts any way you like on your website
which is great I’m a great user of fonts I use a fantastic set font awesome but
this is a nother beautiful free alternative
so how do we use it let’s download it firstly hit the download button there it
is downloading there once you’ve got it downloaded go to the
folder where you’ve got it here’s mine I’m simply gonna extract it
right here that gives us this folder right here and
inside the html/css you’re gonna find a fonts folder inside
there the TrueType font this is what we’re gonna use I’m just going to put
that for once up to one side for a moment so let’s go to our website let’s just
create something that we want to use it with you I’m enabled the visual builder
you let’s just duplicate this row so I’m
going to go on the two squares to duplicate this row and we’ll get rid of
the icons that we’ve got in there which are the fun
Awesome’s I believe you yeah there’s fun awesome so I’m gonna
simply delete those I’m on the text tab they’re doing this I think for
expediency I’ll just delete that one and delete that one and copy this one a
couple of times one two and then just move them where you
you you okay so let’s put some of our nice little fonts on top
and use them so how do we do that good question well let’s go to our text
module you see the little cog there and put that back on visual let’s go to
our design tag at the top there and let’s import them as a heading text you
can do this many different ways this is just one way hardly ever use h6 so I’m
going to import them as an h6 font so I’ll just backtrack what I did there age
six and here’s the font that we’re choosing here hit the little arrow and
then it’s an upload button right there I fit that up blue since you can drag the
files here I wonder if we can actually do that sometimes you can sometimes you
can’t you no don’t see it happening there so what
I did then was I dragged this one over to it but it doesn’t seem to want to let
me do that right there so let’s do it this way let’s choose the
file I think choose file it’s actually opened at the right place we want the
TrueType font file there it is you that got it at that time and now we’ll
hit that upload button oh we’ve got to give it a name okay hello good font so we can find it easier
as well alright so it’s now uploading that font while that’s uploading I’ll
just show you another page of this I’ll put this link below once we’ve got our
font uploaded each of these icons
as a keyboard character so when you type a this this icon will appear be that one
etcetera etc and it goes all the way down using dashes and numbers and
what-have-you so we can simply hit one of these to get these this icon up and
what I did like I said I’ll leave this link below I right clicked on this and I
saved the image ass and put it with my font folder that I just created so I
don’t have to find this webpage every time I want to know what they are that
way I can just bring up an image of it and check it out that way and that’s all I did I put it in an image
here and I can just make it bigger or smaller scroll up and down and see what
I want quickly get it that way so I’m gonna just do some random ones here I’m
gonna take uvw just because I can so okay we’ve got that we’ve got that rh6
you wanna set it now to the elegant font there we are as you can see it’s put a
bunch of junk in there that corresponds to our fault alright let’s go down a bit
and let’s define a few styles let’s have it
text-align:center we’ll have it the blue color that we’ve been using I suppose fontsize I want it big now we can roll
this all the way up 100 pics don’t think it’s gonna be big enough so let’s type
in something else here 150 bucks there we go
there’s spacing I’m gonna leave all that for the time being take shadow why not
just give it a text shadow the rest of it as is so we’ve defined
what we want so let’s actually put one in and I said I was gonna use say uvw
anima let’s go to our text box drop down one now let’s put in a a you and tell it that that is heading six it
should change to an icon paragraph heading 6 there we go and it’s putting
that icon on the watch it hasn’t or it doesn’t look like it has but it has if
we just scroll site down there it is right there
gosh okay well I think that’s probably a little bit too big at 150 pick so let’s
go back to the design tab and make it about half a size 75 isn’t
it heading six
we’ll just type it in be just as easy stomach are there we go that’s a bit
more like it as you can see it’s got that box shadow in there how easy was
that and just go down to the content yeah give it a bit more space by adding
us a line break there we go that’s fine we’ll save that
now let’s do this next one what was you let’s try V this time and again we’ll have to call it heading
six to be able to use it okay that did not work what did I do
wrong at sea last night don’t think I selected the icon before I
hit heading six oh it’s just me now that is a heading sick ah okay I haven’t defined it in the
Styles here okay well let’s quit this what we’ll do we’ll go over this one
we’ll go to the row pop hero stars no let’s go to this and
copy copy the module styles and paste them into these other two here paste
module starts the hair we go it’s appeared there
saves us resetting all that and we could have done it for all the whole page and
I’ll do it for that one as well so we’ve got two U and V there we go let’s drop
that down a bit more and let’s use W on this next one and see what we got so okay drop down one you
let’s put in a W again we’ll make it six heading six here we go
and a bit more spacer we’ll have one more space there we go save that so that’s how easy
it is to use ease and you can wrap rows in each rafts or give them a link if you
wanted to link to something else you can put borders around
all right so there you have it that is how you use Divis new free icon set
there’s many ways of implementing it you can use the unique codes you can use
spans but that’s probably one of the easiest ways of using it and it’s pretty
effective they’re nice-looking icons and of course you can affect them with any
hover effects like we’re doing done with these ones here and they’re just
set their icons some well done Divi you’ve done it again
like I say that’s free you don’t have to use it with the Divi theme you can use
it with any WordPress theme have a look at the documentation it’ll tell you
exactly how well I hope you’ve enjoyed that and found it useful if you have
please like and subscribe to our YouTube channel
if you’re interested in web development take a look down below there’s some
great free web development courses down there as well as some premium ones with
some huge discounts for our YouTube subscribers so once again this has been
jamie from system 22 on web design and tech tips comm thanks for watching have
a great day

1 thought on “Divi 3 How to Import And Use The Elegant Icon Font Set

Leave a Reply

Your email address will not be published. Required fields are marked *