In Icon element in page builder I have simple/square/circle/hexagon… types, is it possible to add a custum type ?

Thanks for your support,

Géraldine

PS : excuse my english, I’m french ;)

votre anglais est meilleur que mon francais :)

Yes, it is possible and there are two ways how to do it. One is simple and quick and one is complex and requires some basic programming skills.

Easy way
So lets have a look on the first one. When you edit your icon in page builder, you can select ‘Yes’ for ‘Use Advanced Global Attributes’. That will alows you to add additional classes, id, or inline style. Put into ‘Extra CSS Class’ field some new class name. For example ‘my_new_icon_type’.
Then in ‘Theme Options > General Settings’ is field for custom CSS. Add there definition of the icon type:

You will have icon background with one rounded corner.

More-fun way:)
If you wish to apply your own svg shapes, then please update this file: ‘/plugins/ishyoboy-boldial-assets/ishyoboy-shortcodes/assets/backend/vc_extend/shortcodes_templates/ish_icon.php’

Please, mind that this file is not overridable by child theme, so you will needs to backup/redo all things after theme update

Between lines 98 – 124 is ‘if’ which returns shapes. First, you will need to add your new custom type to ‘if’ condition.
Second, create new condition inside that which will holds your shape and return it when its called.

So now it looks like this:

and after you add your, for example, butterfly shape, it will be like this:

I know its a lot of text, but its pretty simple :) And one last thing in this file is on the line 141: ‘cases’. Add between circle and hexagon the case of your icon.

Now:

Then:

Now we have shape and condition for your new icon type. But we also have to register it in page builder. This can be done inside ‘/plugins/ishyoboy-boldial-assets/ishyoboy-shortcodes/assets/backend/vc_extend/vc_config/shortcodes/ish_icon.php’ (same file name, but differenet folder).

On the line 27 is array which is registering those types.

Add there your new icon type, so it will be selectable in page builder:

And thats very much it :) Let me know if you need some further help on this.

Bye

---
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

Bye,
Géraldine

Let us know if you was able to make it ;)

Bye

---
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

The fun way does not work very well.
I tried exactly like you said and in a second way I tried this in the ish_svg_icon.php
I can’t ajust the shape in the middle or change color, and the icon and the svg icon don’t appear in the middle of the shape.
Did I miss something ?

1 = with Icon element
2 = with SVG Icon element

Thank you very much,
Géraldine

we are half way there :)
Can you please paste here some preview link, so we can have a look?

Thank you

---
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

we didnt forget about you. Just trying to reproduce your icon with your paths and looking for solution how to do it.

Will get back to you as soon as possible.

Have a great day.

Bye

---
If you are happy with our theme and support please rate us in your Downloads Section on ThemeForest. A 5 star rating is always a great motivation for us!

Sorry for my silence, but I’m back from holidays now.
If it helps you can download my shape here: https://assuna.net/DATA/shapes/

Thanks a lot,

Géraldine

You also have to add some custom CSS Styles to position the elements correctly. If we asume your type of icon is “ish-logo” then the css should look like:

E.g.:

Please test it out and let us know if it works as expected.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market