How to Make Custom Icons for WordPress and Elementor Pro
How to Make Custom Icons for WordPress and Elementor Pro
Get Elementor Pro
https://be.elementor.com/visit/?bta=2…
Amazon Affiliate Link - Get what you need while supporting the channel!
https://amzn.to/2VdX2wl
CKTechCheck Website:
https://cktechcheck.com/
Content
4.549 -> Hey everyone, Patrik CK here, with a web development
tutorial.
8.62 -> This one is all about creating custom icons
to use on your WordPress website utilizing
14.57 -> the Elementor Pro page builder.
17.45 -> There are three parts to this tutorial.
19.179 -> First, we’ll cover how to build your custom
icon so that when you export them they are
24.73 -> optimized for the converter on the Fontello
website.
28.119 -> I don’t know why but this part seems to
be missing from all the tutorials I’ve watched
32.69 -> about this topic so I wanted to make sure
it gets covered here.
36.59 -> Second, we’ll use the Fontello site to convert
our new icons into a font family that can
43.1 -> be used on any website regardless of the underlying
technology.
47.48 -> Third, we’ll upload the newly generated
files to our WordPress website using the Custom
53.899 -> Icon feature in Elementor Pro and see our
new icons in action.
59.03 -> Before we start I want to answer the question
of why we need to go through this process
63.929 -> when the free version Elementor allows you
to upload SVGs into any of the widgets that
70.25 -> support icons.
72.02 -> The simple answer is that you don’t have
to, you could create your custom icons and
77.07 -> upload them directly to your site as an SVG
file with no problem but if you wanted to
84.259 -> say, have your icon change color when hovered
over, or be available in the icon library
90.909 -> in the future without having to search for
it in the media library, or create a stacked
96.28 -> and white version, it’s much easier to have
these capabilities when your custom icons
102.78 -> are converted to font files.
105.82 -> For me, the biggest advantage is the ability
to change the color on the fly.
110.69 -> Instead of making different colored versions
of the same icon you only need one that can
116.77 -> then be changed into any color with the Elementor
settings or simple CSS if you’re not in
124.04 -> WordPress.
125.04 -> It’s so much more convenient and easier
to maintain going forward.
129.27 -> I’ve also found some quarks with particular
widgets when using uploaded SVGs as icons.
136.05 -> Such as sizes not being consistent between
the editor and the live page, colors being
141.37 -> overwritten, or any number of other issues
that have cropped up over the years, I’m
146.68 -> guessing from compatibility issues with other
plugins.
150.7 -> You will need to buy an Elementor Pro license
to use the custom icon library on WordPress.
157.25 -> Link in the description.
158.25 -> Let’s get started.
159.89 -> I’m going to be using Adobe Illustrator
to create the custom icons and while the commands
166.15 -> may be different the logic behind how to build
the icon should work no matter the program
172.019 -> you use as long as it supports SVGs, so no
MS Paint.
177.75 -> Even though we are working with vector graphics
it’s still a good idea to start with a larger
184.069 -> canvas such as 1000 pixels by 1000 pixels.
188.4 -> Working on larger canvases simply allows the
scaling of intricate details to be easier
194.94 -> to calculate.
196.37 -> The most important thing to remember when
making your custom icon is to not have multiple
202 -> infilled elements stacked on top of each unless
they are contributing to the over all shape.
208.98 -> The best way to see this for yourself is to
simply fill all your elements in with one
214.5 -> color such as black.
216.68 -> This way you see if anything is filling a
space it shouldn’t and delete it or cut
222.68 -> it out.
223.849 -> This is especially true if you are trying
to create icons with a background like roundels.
229.66 -> You can not simply put your custom icon on
top of a circle, you’ll have to cut it out
234.93 -> of the circle itself.
237.09 -> The easiest way to do this and get your icon
ready for export is to use the Compound Path
242.93 -> option under the Object menu in Illustrator.
246.98 -> As the name implies this function combines
multiple paths into one and in the process
254.04 -> paths are removed and cut.
256.009 -> Let’s see a few examples of how this works.
258.36 -> Let’s make a circle than a square.
261.47 -> If we put the square on top of the circle,
select them both and go to the Object menu,
267.66 -> then down to Compound Path, and select Make
or use the shortcut CTRL and 8.
274.83 -> We see that now the square was cut out of
the circle essentially flattening our graphic.
280.65 -> If we undo Compound Path and move the square
so that it’s hanging over the edge and preform
286.89 -> the function again we see only the part of
the square that’s on top of the circle gets
292.8 -> cut while the rest of it that’s outside
of the circle remains, again we see now that
299.7 -> it’s just one path and not two different
elements stacked on top of each other.
304.6 -> Here is where things get interesting.
307.35 -> If we reset our example graphic and now add
a triangle into the mix, putting it to overlap
313.27 -> part of the square and now make our compound
path we see how adding more elements affects
319.539 -> the results.
321.11 -> If there are three or more elements on top
of each other what ever outline they make
326.93 -> will remain when the compound path is made.
331.35 -> This can allow you to make some intricate
layouts.
334.4 -> Something I would definitely recommend playing
around with.
336.96 -> I’m using basic shapes for demonstration
purposes but the same ideas apply with anything
344.05 -> you want to create a compound path with, so
have at it!
348.78 -> Let’s get ready to export!
350.5 -> No matter what your icon looks like you need
to Make a Compound Path so that what you have
357.59 -> left is a single element.
360.67 -> Also make sure there are no outlines and that
the fill is a solid color with no gradients.
368.07 -> Select you icon, right click, and choose Export
Selection.
372.45 -> In the export window choose where you want
to save to and most importantly under formats,
378.88 -> select SVG, lastly choose Export Asset.
383.21 -> If you’re not using Illistrator the same
rules still apply, the final SVG file should
388.979 -> only consist of one path, with a solid fill,
and no outlines.
394.5 -> For you more technical folks the SVG code
should look like this.
399.74 -> With only one path, no predfinied polygon
attributes, or the like.
404.67 -> Clean and simple.
406.32 -> Now that we have our SVG file or files let’s
visit the Fontello site at fontello.com.
415.069 -> Fontello other than being a great library
of already made icons is also a SVG to webfont
421.979 -> converter.
423.74 -> Webfont also known as Web Open Font Format
or WOFF for short is a format for supporting
432.44 -> fonts on modern browsers which provides the
ability for vector scaling and colorizing.
439.21 -> We are essentially turning our icons in a
font that a browser can read and render.
446.06 -> There are other online converters like IcoMoon,
Fontastic, and more that all essentially do
453.389 -> that same thing.
454.389 -> I’ve just always used Fontello.
457.15 -> The converter is very easy to use.
460.09 -> Simply drag and drop your SVG files onto the
page.
464.32 -> Once all your icons are uploaded they will
appear under the Custom Icons header.
470.13 -> If all you get is a square outline, something
was wrong with your SVG file.
475.62 -> Open the file again in the program you used
to create it and make sure the requirements
480.52 -> mentioned above were followed.
482.99 -> When I first started messing around with icons
not preforming the Compound Path function
488.5 -> was what kept messing me up.
490.88 -> With your successful icons uploaded, you can
click on each one to get a preview and provide
497.28 -> additional details like the name, hex code,
and keywords.
502.19 -> If you are working on a lot of icons it’s
best to create a good naming convention for
507.56 -> all of them.
508.56 -> When you have all your icons uploaded and
details added make sure they are all selected
513.959 -> along with any other icons on the site you
may want and go to the top right and give
520.05 -> your font a name.
521.659 -> Be descriptive but succinct so that you and
other users of your font icons know what to
528.82 -> expect.
529.82 -> This name can only consist of lowercase letters,
dashes, and underscores Then hit Download
536.49 -> Webfont.
537.839 -> The number in the button identifies how many
icons are part of the font, so make sure this
543.33 -> matches your own count.
546.209 -> The zip folder you get contains several files
that should fit most project needs.
552.34 -> For this tutorial, we’ll be uploading the
entire zip file to Elementor Pro.
557.7 -> To do, this log into your WordPress site.
560.959 -> Under the Elementor menu go to Custom Icons
and then Add New.
566.66 -> In the next screen type in a name for your
icon set, this is the name that will appear
571.61 -> when you pull up the icon library.
574.149 -> Again just be descriptive but succinct.
576.97 -> Now drop in the zipped file we downloaded
from Fontello.
581.63 -> After a successful upload, you should see
your icons appear on the screen where you
586.41 -> can now publish them.
587.41 -> One drawback to this setup is the inability
to add icons to an existing set you’ve already
593.94 -> uploaded.
594.94 -> This is more of a technical issue with how
font files are handled than a miss on Elementor’s
600.79 -> part but I still wouldn’t mind seeing a
system where we can add more icons without
606.12 -> either reuploading the entire font family
or adding a whole other font family for one
612.98 -> icon which adds more requests onto the page
load which is bad.
618.44 -> So like with any project make sure you plan
out your needs ahead of time so that you have
624.76 -> all the icons you need in one set.
627.32 -> Anyways, let’s see our new icons in action!
630.25 -> Load up the editor and pop in a widget that
supports icons.
634.32 -> In the icon library, any icon set you’ve
uploaded will appear below the stock libraries
641.35 -> and be titled with whatever name you gave
during the creation process.
646.09 -> Select one and load it onto the page.
648.16 -> You can change the color, make it larger,
swap it for one of the other icons, or do
653.959 -> anything you want.
655.69 -> Well, that’s it, we have our custom icons
on the site ready to use anywhere.
663.04 -> I hope this tutorial helped, if it did please
consider liking and sharing so other people
669.05 -> can find this content in the future.
671.63 -> Until next time this has been Patrik CK, goodbye.
Source: https://www.youtube.com/watch?v=STwv6nMOXnw