ACF Issues with rendering content

[paullalley]

Content in the sidebar of the page below in the side bar appears to be rendering incorrectly when previewing online. However, inside the Pro interface it looks perfect. Some help would be great.

Ski in Gulmarg | K-Line Adventures

[ruenel]

Hello There,

Thanks for writing in! You are experiencing this issue because you have inserted the ACF shortcode {{acf:field_name}} in a complicated element structure. Please keep in mind that the icon list item title is only supposed to accept plain text. It may have work within the editor because the structure is already been loaded. The front end will not work because the ACF code messes up the whole list icon shortcode.

This is the list icon shortcode:

/**
 * Element Shortcode: Icon List Item
 */

$atts = cs_atts( array(
	'id' => $id,
	'class' => trim( 'x-li-icon ' . $class ),
	'style' => $style
) );

$icon_style = ( $icon_color != '' ) ? "color: $icon_color;" : '';

$icon_atts = cs_atts( array(
	'class' => 'x-icon-' . $type,
	'data-x-icon' => fa_entity( $type ),
	'aria-hidden' => 'true',
	'style' => $icon_style
) );

$link_begin = '';
$link_end   = '';

if ( $link_enabled ) {

	$link_atts = cs_atts( array(
		'href'   => $link_url,
		'title'  => $link_title,
		'target' => ( $link_new_tab) ? '_blank' : ''
	) );

	$link_begin = "<a {$link_atts}>";
	$link_end   = "</a>";

}

echo "<li {$atts} ><i {$icon_atts} ></i>" . $link_begin . do_shortcode( $content ) .  $link_end . "</li>";

Adding {{acf:field_name}} created a conflict with the code above. It is best that you use this code, {{acf:field_name}}, in a text element or with an element that is not of a nested shortcode structure like the icon list.

I would recommend that you use a text element and insert the icon shortcode and the ACF shortcode. You can check out the icon shortcode from here:
http://demo.theme.co/integrity-1/shortcodes/icons/

Hope this helps.

[paullalley]

Ok, I found not get this to work with the new “text” element and had to use the “classic text” element.
The other issue I have as a result is that I can’t control the distance between the icon and the text so that the text aligns consistently. How do I add this here?

[x_icon type="calendar-check-o"] {{acf:duration}}
[x_icon type="map-marker"] {{acf:country}}
[x_icon type="location-arrow"] {{acf:location}}
[x_icon type="map-o"] {{acf:mountain_range}}
[x_icon type="bed"] {{acf:trip_rating}}
[x_icon type="angellist"] {{acf:skill_level}}

[ruenel]

Hello There,

Thanks for updating in! To adjust your icon and ACF output text, please use this code:

.x-text p i {
    margin-right: 4px;
    min-width: 20px;
}

Feel free to adjust the margin right if needed. Hope this helps.