How To Use The Icon Element

Published On: October 22nd, 2020Categories: Avada, Video Training921 words4.7 min read

Avada Website BuilderIn this series of videos, we are looking at how to use the Fusion Builder Elements. This video looks at how to use the Icon Element in Fusion Builder with Avada.

Purchase your next copy of Avada –

Avada Documentation –

Useful Links: Avada Layouts –

Avada Quick Start Guide –

Avada Builder Documentation –

Need support? –

How To Use The Icon Element – Transcribed

Hi everyone in this series of videos we’re looking at how to use the Fusion builder elements today we’re looking at how to use the icon element. 

Make sure you subscribe to our YouTube channel to keep up with all the latest videos like this one. And if you don’t want to miss one, click the Bell icon to get notifications of all new videos on our channel. 

OK, let’s begin. 

The icon element has been renamed in about a 6.2 from font awesome icon element to just icon element. This is Because. Now it’s not just font awesome icons you can use in this element. 

You can now upload your own custom icon sets to add to the list of icons available. 

This can be done by the element or directly at Fusion builder icons. 

Icons are also included as options in several other elements, but if you want to add money independently, you’ll want to use the icon element. 

As an example, I’m on the podcast demo here and I will change this image at the top to be an icon instead. 

So, we’ll add the icon element here and just align it to the centre. 

And then I’ll delete the image element above it. 

OK, let’s look at configuring this. 

The first option in the general tab is choosing the icon itself. 

You might notice some changes to this section. As with Avada 6.2, we have redesigned the icon picker. Adding a way to filter the icon subsets, including any custom icon sets you might have added, and also a way to add these custom icon sets. 

There is a plus icon on the right-hand side of the icon picker and clicking this takes you directly to the icons page. Also found from Fusion builder icons. 

For more detail on uploading custom icons, please see the link provided. 

So, this icon. I’ll search for headphones and this is the one I’m after. 

The next option is the size of the icon, and here I want it reasonably large, so I will set this to 130 pixels. 

The next option, flip icon, allows us to flip the icon if we want in a horizontal or vertical direction. But for this icon it’s good as it is. 

You can also rotate the icon in the option below this, but again it’s good as it is. 

The next option is spinning icon and if you like a bit of Animation you can have the icon spinning by setting this to yes. 

I’m going to leave it on note. 

Next comes a new option called link which you can use to link the icon to any URL and there is also a link target option under this to control how the link opens. 

The alignment option is next, and we have already aligned this to centre to match the layout. 

The final options in the general tab are the usual element visibility option, which allows you to choose whether the element is displayed on various screen sizes. 

And the CSS class and CSS ID fields which allow you to further customize the element with custom CSS. 

OK, let’s move on to the design tab. 

The first option is for margins and I can finetune the icons placement with these if I like. 

I’ll leave it empty and then the margins are calculated automatically based on the alignment and the icon size. 

Icon colour comes after this and I think I’ll change it to a colour better suited to this demo, like the pink from the menu here. 

Icon hover colour is after this and I’m going to leave it on the default of white here. 

Under this is the icon background option and I’m going to leave this set to the default of yes. 

I’m going to add 50% transparency though to the default dark grey background colour, so it picks up some of the page colour. 

And I’m going to do the same for the icon hover background colour as well, but this one I’ll make white with 25% transparency. 

I’m going to remove the one-pixel border from this icon as I don’t think it’s needed, and this will remove the next two options for border and hover border colour. 

And for the final option icon, hover animation type, I’m going to choose pulsate. 

Finally, with this element there is the extras tab, and you can choose from one of seven animations for the loading of the element, as well as being able to control the speed and timing of the animation. 

For more info on the animation options, please see the link provided. 

I’m just going to leave the animation setting on none, and now let’s preview the page. 

Here’s our icon and we can see the behaviours we chose for it when we mouseover. 

Yeah, that looks good. 

OK, this concludes our video on how to use the icon element. 

Transcribed by ZAAAX Design.

If you need audio transcribed, contact us here.

Don’t miss this ...

We don’t spam! Read our privacy policy for more info.

Table of Content

Recent Posts

Don’t miss this

We don’t spam! Read our privacy policy for more info.