How to Add Icons in WordPress With Elementor

hey everyone this is Noah from Elementor
the icon widget is incredibly useful for
displaying icons and numerous tiles on
your page I’ll now show you how with
Elementor you can add them along with
cool features and effects so first I’ll
search for the widget and drag it in and
once it’s dragged into place you’ll see
the content area in the style area in
the concert area you have full control
over the widgets contents so for view
you could set it as default stacked or
framed so you can see with these two
other icons it’s stacked and framed with
a border icon here you could choose from
the list of icons from the font awesome
website say I choose refresh icon link
in this field you could insert a link
for your icon and set it to open in a
new tab by clicking here and I have the
alignment as left center or right moving
on to the style tab here you have full
control over the icon style and the icon
hover style
in the icon style you could choose the
primary color now note that if you set
the icon as stacked or framed a
secondary color option is added here I
will show you this soon with these two
icons next you have the icon size where
you could choose the size of the icon
and you have icon rotate where you could
rotate the icon completely
[Music]
we’ll move on to the icon over style
options here I have the primary color
where I could set the offer color for
the icon say black as you can see it’s
black when I move the mouse over it and
the animation I have here a big list of
animations see skew or wobble etc now
I’ll show you this second icon where as
you can see it is a stacked icon so it
also has a shape option to choose as
circled or squared and in the style as
you can see the secondary color is added
which is actually the color of the icon
itself another added feature is the icon
padding where you could set the inner
padding of the icon this is great for
example if you reduce the size of the
icon then add its padding and you have
the border radius where you would set
the border as rounded or even rounder or
squared etc now same goes for the third
icon over here which is set as framed
and as circle shapes now in the icon
hover settings for both of these icons
you also have the secondary color now
watch this I could set a really cool
hover effect by setting the over colors
as a negative so say I give the primary
white and the secondary color is blue
and now I give it an animation of pop
see how cool that looks
now that you know how to use this great
icon widget you can add creative and
dynamic icons to your page I hope you
enjoyed this video for more videos and
tutorials subscribe our youtube channel
or visit us at docs.bmc.com