Adding new icons packs to Elementor

[ryanlabelle]

@adiraomj do you know if we can include custom icon packs like Glyphicons into the Elementor Icon control? Can you find out if their API supports this? We want to be able to add in some new icons packs.

Thanks!

[ryanlabelle]

Ref: https://github.com/pojome/elementor/blob/master/docs/content/controls/_icon.md

https://cl.ly/1L0D170Y2A3u

[adiraoco]

Working on this now

[adiraoco]

@ryanlabelle I checked out the link you posted above. It does not look like they have a feature to include custom icons.

The include and exclude parameters are only used to modify the list of font awesome icons.

This feature has been repeatedly requested. Check out https://github.com/pojome/elementor/issues/110

We have two options:

1. We could create our own icon control and use it in our elements. The docs does not talk about how custom controls can be created. We will have to see if it is possible.
2. Or we can wait till feature arrives and include the icons globally.

[ryanlabelle]

@adiraomj thanks for checking that out. The icon pack is important to us. Can you look into creating our own control? Then we can only include the icon packs we want.

I think I read somewhere how to create a custom control, but I can't find it right now. With a hook we might be able to offer our custom icon control right after their icon control is used.

• https://github.com/pojome/elementor/blob/master/docs/content/hooks/php-hooks.md#elementorelementafter_section_end

Here is a link to the controls documentation.

• https://github.com/pojome/elementor/blob/master/docs/content/controls/README.md

[adiraoco]

I added social glyphicons after font awesome icons in all our elements. Please test and see if this is ok.

I'll then add all the other glyphicons

[ryanlabelle]

Looks great. We are working on a custom icon pack and we should be able to include with with the same code that you have provided. Thank you. :)

We'll do some more testing and reopen this issue if we need to.

[teaganm]

Icons are looking good 👍

Let's go ahead and add them all, only thing is we should have them all share one class, and having the icon name shorter would be nice.

Right now the markup is like this:

<i class="travelpack-aqualung-bottles"></i>

ideally something like this would be better:

<i class="th-trp tr-aqualung-bottles"></i>

So if we can have 'th-trp' as the shared class for all, great. And if it's quick to change 'travelpack' to just 'tr' then cool.

[teaganm]

Oh and also the added icons are not appearing in the Elementor widget form - both the travel pack and Glyphicons are not displaying which makes me think it's b/c of a recent change in Elementor:

https://cl.ly/3v1n2o1L2Y2r

They definitely were showing up before.

[ryanlabelle]

Added th-trp class ahead of icon class.

[ryanlabelle]

Adding wp_enqueue_script via Elmentor hook to provide icon styling in the editor. Working now.

[teaganm]

@ryanlabelle Can you add the new Linea pack the same as the travel one?

The Linea pack actually came as 7 different font packs, so they are separate font files, but I combined the CSS into one, and all the font and CSS files are now added into the widget pack along side the other font packs.

I'm fine with the classes as-is, but we'll just need one extra class along side the existing ones like we did with the travel pack.

How about "th-linea"

ex: <i class="th-linea icon-basic-picture"></i>

[ryanlabelle]

@adiraomj - We've added two new travel icon packs, TravelPack which is under th-widget-pack/assets/travelpack/ and Linea which is under th-widget-pack/assets/linea/

TravelPack has already been added and working but we need to add Linea and this is a much larger pack so we think we'll need our own icon control.

Basically we want to copy the Elementor Icon Control into our own version. We want to strip out Glyphicons and Font Awesome (leave the font awesome social) and just have the new TravelPack and Linea.

So the drop down would contain, TravelPack, Linea and then the Font awesome social icons. That's it.

Is that something you can do for us?

[ryanlabelle]

Also, we are going to phase out Glyphicons, so we can completely remove them from the plugin. We''l be using our own travel pack along with font awesome for social.

[adiraoco]

Instead of creating a new field, I modified the existing one. I added the travelpack, linea and font awesome social icons.

I have modified the icon fields in the button element like so: https://github.com/ryanlabelle/th-widget-pack/blob/master/elements/button.php#L69-L70

To modify the list of font awesome social icons just modify the list here. https://github.com/ryanlabelle/th-widget-pack/blob/master/fields/icons.php#L206-L224

[ryanlabelle]

Thanks Adi, I"ll check that out.

[ryanlabelle]

The Icons are showing for me but is there any way to remove the font awesome icons from the list? Just for our widgets because it's so long.

[adiraoco]

I removed all the font awesome icons. All our icon fields only have only the travelpack and linea icons now.

How about we only use the default font awesome icons for the team widget? It's for social profiles.

[ryanlabelle]

oh yes, sorry, could you leave in the font awesome social for all widgets? I think buyers will want to use social throughout the site. Is that possible?

[teaganm]

Thanks. Also, it would make things easier in the CSS if we can add a class that will be output along side the existing classes for all of the Linea icons, like we did with the travel pack.

How about "th-linea"

ex: <i class="th-linea icon-basic-picture"></i>

rather than right now: <i class="icon-basic-picture"></i>

[adiraoco]

I added th-linea class.

Also added font awesome social icons. The list can be modified here https://github.com/ryanlabelle/th-widget-pack/blob/master/fields/icons.php#L1653-L1672

[teaganm]

Awesome, thanks. Looks good 👌

[teaganm]

Overall this it looking good. One thing I'm thinking is it would be helpful to add two more sizes. We have Small and Large, let’s add Medium and Extra Large

So the options would be:

Small Medium Large Extra Large

How about this for the new classes:

th-icon-size-md

th-icon-size-xl

[ryanlabelle]

Added. Cheers.

[teaganm]

Thanks, that's great. I'd say this is wrapped 👌

[JingwuChen]

hello ,everyone how can i add new pack of icons to elementor button,says i want to add the docker icon to one button ,but i can not find the icon in the list ,i have scan the source code of elementor ,but i can not find how to add the new packs of icon in the source code

[bentalgad]

If some one looks for a way to add icon fonts to the elementor core options this is a great plugin: https://wordpress.org/plugins/custom-icons-for-elementor/

[m0rg5]

Was this abandoned? Can we add icon packs?

[suroh001]

If some one looks for a way to add icon fonts to the elementor core options this is a great plugin: https://wordpress.org/plugins/custom-icons-for-elementor/

This works but for some reason, the icons come out very small for me, is there anyway i can fix this with CSS? my link is http://beta.ahadgroup.co.uk/services

[smartrashed]

awesome its working

[Ninetheme]

If some one looks for a way to add icon fonts to the elementor core options this is a great plugin: https://wordpress.org/plugins/custom-icons-for-elementor/

don't use this plugin, will slow down your website because of 50MB+ database tables