Icon not render properly in fronend

[SatishKumarPrajapati]

# Problem Description

I am using icon control for custom module and working fine in builder mode but for some icons icon not render properly in front hand . I am using icon_lock_alt icon.

Screenshot and/or gif

Builder Mode Front Hand

[xxtesaxx]

Are you using et_pb_process_font_icon() in combindation with esc_attr()? In php you need to do it like this:

$icon = sprintf(
    '<span class="et-pb-icon">%1$s</span>', 
    esc_attr( et_pb_process_font_icon( $this->props['font_icon'] ) )
);

[SatishKumarPrajapati]

i have tried this but still facing same issue $sepicon = sprintf( '%1$s', esc_attr( et_pb_process_font_icon( $this->props['sep_icon'] ) ) );

[xxtesaxx]

Have you put the output in a span with class et-pb-icon as I suggeted above? I just tested it and it still works fine.

[SatishKumarPrajapati]

yes i use code as you suggested but still i am facing same issue... All icons work fine except some icons.

[xxtesaxx]

Please show your code

[SatishKumarPrajapati]

$icon = sprintf( '<span class="et-pb-icon">%1$s</span>', esc_attr( et_pb_process_font_icon( $this->props['sep_icon'] ) ) );

[xxtesaxx]

Okay and in the visual builder and backend builder it is working fine but on the page itself its not working, right?

[SatishKumarPrajapati]

yes.... in visual builder mode it show perfectly but in front end it don't show perfectly

[xxtesaxx]

That is really odd. It should work, given that the core Blurb module renders the icon the exact same way:

$image = ( '' !== $font_icon ) ? sprintf(
    '<span class="et-pb-icon et-waypoint%2$s%3$s%4$s" style="%5$s">%1$s</span>',
    esc_attr( et_pb_process_font_icon( $font_icon ) ),
    esc_attr( " et_pb_animation_{$animation}" ),
    ( 'on' === $use_circle ? ' et-pb-icon-circle' : '' ),
    ( 'on' === $use_circle && 'on' === $use_circle_border ? ' et-pb-icon-circle-border' : '' ),
    $icon_style
) : '';

Can you show the output of the html and css with the insepector like so:

[SatishKumarPrajapati]

blurb control work fine but problem in custom module. They have provide divi extension example https://github.com/elegantthemes/divi-extension-example/ and problem is same in their example.

[xxtesaxx]

Please show the output html

[SatishKumarPrajapati]

This is the output

[carlfromfelton]

I am seeing a similar issue on Visual Builder and Front End. So far on three different icons.

I saw this issue also in the past for more icons in the Blog Module in the overlay icon option, then was fixed in 3.1 and I read in the changelog:

• Fixed the broken appearance of some hover icons.

https://www.dropbox.com/s/uhw6hke2e9gzivi/Icons.mp4?dl=0 a link to a video with the issue that I am seeing in a module with partial support. If you see below the icon there is a line that says: "PHP Active (Field Value): " and then some characters. This is showing the actual value of the field. When the icon renders well is showing something like %%number%% and for the three icons that are not working show: %[%%, %\%% and %]%%.

[SatishKumarPrajapati]

yes i am facing same issue and still not find any solution for that. if you have any solution for that then help me to solve this.

[IvanChiurcci]

The problematic font icons are those having the following indices: 91, 92, 93 and from 220 to 229

Normally, the icons are saved in this format: %%icon_index%% and the et_pb_process_font_icon() function gets the icon index integer value by removing the % signes and uses it to select the right icon from the et_pb_get_font_icon_symbols() function

But these problematic icons do not render properly because they are not saved as %%icon_index%% but the following way:

91 as %[%% 92 as %\%% 93 as %]%% 220 - 229 as %"0%% - %"9%%

that's why the et_pb_process_font_icon() cannot get the correct integer value of the icon index for these icons

I did a quick research and looks like the problem stems from the _decode_double_quotes() function (I might be wrong though) which has the following line:

$shortcode_attributes[ $attribute_key ] = str_replace( array( '%22', '%92', '%91', '%93' ), array( '"', '\\', '[', ']' ), $processed_attr_value );

So, basically, if we have %%220%% it will be changed to %"0%% ( %22 part is replaced with a double quote ) and so on. To solve this issue I tried to reverse it the following way(this is for front end):

$font_icon = $this->props['font_icon'];
$font_icon = str_replace( array( '[', '\\', ']', '"' ), array( '%91', '%92', '%93', '%22' ), $font_icon );
esc_attr( et_pb_process_font_icon( $font_icon ) );

this works but not always for some reason, for a module with full VB support it works when you first select the icons and save but if you reload the VB and save again without changing icons then it breaks again.

For modules with full VB support we need to do the same for proper rendering in VB, so I tried the following using JS replace():

var font_icon = this.props.font_icon,
      font_icon_chars = { '[':'%91', ']':'%93', '\\':'%92', '"':'%22' };
font_icon = font_icon.replace(/[[\]\\"]/, m => font_icon_chars[m]);
utils.processFontIcon(font_icon);

EDIT: Or you might better use this for VB instead:

var font_icon = this.props.font_icon;
font_icon = font_icon.replace( "[", "%91" ).replace( "\\", "%92" ).replace( "]", "%93").replace( "\"", "%22" );
utils.processFontIcon(font_icon);

this seems to work fine for VB.

So, this solution does not solve the issue entirely but this seems to be the right track and will continue testing. Would be grateful for any better solutions for this issue, ideally being fixed in the core files (so sad it still hasn't been addressed yet as of Divi v3.10).

[IvanChiurcci]

@lots0logs any progress on this issue? thanks.

[SatishKumarPrajapati]

@lots0logs any progress on that issue ? i think bug should be fix in next release...

[jcdotnet]

'font_icon'     => array(
                'label'                          => esc_html__( 'Icon', 'plugindomain' ),
                'type'                   => 'select_icon', 
                'option_category'     => 'basic_option',
                'class'                  => array( 'et-pb-font-icon' ),         
                'toggle_slug'            => 'icon',
            ),

This is still NOT working for me and this is not working also for any third-party modules. BUT not only those icons are not rendered properly as mentioned above but also we cannot access the module from the classic builder because of this exception:

load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,moxiejs,plupload&ver=5.1.1:2 Uncaught Error: Syntax error, unrecognized expression: li[data-icon="%"8%%"]
    at Function.fa.error (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,jquery-ui-core,jquery-ui-widget,moxiejs,plupload&ver=5.1.1:2)
   ...

@lots0logs, @IvanChiurcci, @SatishKumarPrajapati, @charles890123 have you managed to solve this issue? Any workaround while it's fixed?

(this bug is causing the module not to work and not only that, the module can't be opened!! IMHO, I think it should be marked as important)

Thank you in advance.

[lots0logs]

@SlavaET Could you take a look at this?

[jcdotnet]

@IvanChiurcci the value seems to be changed when saving the module. I'm not sure.

As workaround we can check and pass the correct values to processFontIcon as you suggested, but we have to prevent that value change, otherwise the module won't work in the classic builder (it will in the Visual Builder).

So we need another workaround to handle this. The initial font icon value can't be %"8%%, it must be %%228%%, same for the other problematic values.

[kannan6240]

Is this issue solved? Assist me guys. @SatishKumarPrajapati

[jcdotnet]

Yes, @kannan6240. It was solved in version 4.4.4 ( updated 04-23-2020 )

[kannan6240]

Yes, @kannan6240. It was solved in version 4.4.4 ( updated 04-23-2020 )

I have version 4.4.7 @jcdotnet Can you please assist me on how to get it right. I'm not getting what wrong I'm doing. I seeing errors. I

[tkaarlas]

This still happens in most recent version with Blurb. Works in visual builder, but for example the clock icon renders as ”%%92%%” in frontend.