[Resolved] Create a Grid with these dynamic elements

[Author]

Posts

[Pete]

HI there,

Using Elementor we can, with their theme builder create grids with the dynamic elements as in my attachment.

Is this possible with Toolset?

My concern is the icons, these are dynamic, we have two rows to make this look like it does.

We have had a dig about and struggle to find a way of doing this. The issue, there is so much documentation for Toolset, we can't find specifically what we need.

Any thoughts would be great.

Regards, Pete

[Pete]

Hi again,

Following a video by Dario on creating a search form, I have pretty much sorted the above, however...is there a way of adding an Elementor icon to a Toolset Gird?

See here: hidden link

We have a grid, this very roughly set out how we would like...needs styling later.

See where I have added the word 'icon'? This where we would like a generic icon for each area.

The would be from a typical lusting like this: hidden link

Is this possible and how do we do it please?

Sure I could add an actual image instead of an icon, however these grids will contain a lot of properties so having small, individual images will slow down the page...icons being more efficient.

Thank you, Pete

[Minesh]

Hello. Thank you for contacting the Toolset support.

First of all - Please keep in mind the following limitation:
https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/create-templates-for-custom-post-types-with-elementor-and-toolset/#limitations-when-using-elementor-and-toolset-templates-together

If I understand you correctly - you were using the icon widget of elementor to display such icons. There is no way to directly add such widget to view. Please check the following Doc that will help you to understand how you can build views with elementror:
=> https://toolset.com/documentation/user-guides/using-toolset-with-elementor-page-builder/build-custom-queries-to-list-posts-with-elementor-and-toolset/

You should try to generate the icon link - for example:

<a href="<em><u>hidden link</u></em>"> <img src="icon-imag-path" />
</a>

Or use some CSS class to adjust the image icon.

[Pete]

Hi Minesh,

Ok, so none of the above says we can do this?

In a Toolset Video here: hidden link
They have property icons not too dissimilar from what we want to use. (See pic attached)

How did they get these on the site please?

I can't see how to find the icon path from Elementor and the page we've created in the first place. How do I find the icon plat please?

[Minesh]

I see when I try to add one of the icon its added as given under - where you should change the "href" attribute for the anchor tag and change the class name:

<a class="elementor-icon" href="<em><u>hidden link</u></em>">
<i aria-hidden="true" class="fas fa-tram"></i>			
</a>

you will be able to know what class name you need to replace with fa-tram with each icon at top of the page:
=> hidden link

For instance:
hidden link
The icon class name you will see at top of the page is:

<i class="fal fa-cars"></i>

[Pete]

HI Minesh,

Thanks for your reply.

Ok I can see I can use Font Awesome, I did think of this. So from the Font Awesome site I can use this code....

<div class="col-sm-4"><i class="fas fa-user"></div>

Which shows up here: hidden link

Are you saying it's is ok to use an, icon from another site (font awesome) rather than one from my own site?

Or is it better to upload my own SVG?

However as said before, these grids do have alot of properties so don't want them slowing down with either an icon or svg if it is't the right thing to do.

[Minesh]

I do not think you need to add now icons as its already available. What you need to do is use the icon name you want to display:

<i class="fal fa-cars"></i>

[Pete]

My issue is resolved now. Thank you!