Hey Josue
Thats great thanks. But what about the data-av_icon=””

So is the following the proper way to accomplish this?
1. First you render the icon on a page or whatever using the shortcode.
2. then publish page
3. Then inspect page
4. then copy past the code into the widget area. Meaning you are copy pasting literally a “square” and then it will render the proper icon?

Whats the deal with the squares?

oh they are out there. just waiting in line for responses ;)

Ismael this sounds like a brilliant solution. But for some reason the process seams so hard for me. Unless there is a better way of implementing icons in widget areas. I first create a new page and use the icon shortcode to generate it. then I copy that code into the widget area. This was fine until i needed to change them.

If I inspect a rendered shortcode like you mentioned I do get different code.

<span class="av_font_icon avia-icon-pos-left" style="font-size:15px;line-height:15px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>

but as you can see the icon = a square. If I just type the shortcode numeric code (example ue821) then the browser just renders the text not the icon. But in that html code it would be easy to ass another class after avia-icon-pos-left and then target that in css.

So for me it was easier to just use the code generated after creating the shortcode, as the numeric code works in thsi manner. But then I cant target it so far with my skills.

Would it be too much of a pain for me to ask that someone provide an example with the proper code placed in the widget area, along with css that has the power to say change the color or position of a specific icon.

http://www.jackandaddi.com

in the footer. the code is above that built it. Is this something that I would change in my child style.css file? or can it just be changed in the inline code of the widget are? what is the normal practice for this?

[URL=http://imgur.com/SAtgl2H][IMG]http://i.imgur.com/SAtgl2H.jpg[/IMG][/URL]

I think I got this.

In the settins, update settings, add the theme forest credentials.

I did this and it showed the update but I had to manually click it to update.

I added the function only, to my child’s function.php file and nothing happened. but I see the other forum provided edits to funtions in my child folder start with add_filter( then contend) followed by a function. If I needed to add the filter also I don’t know what the values should/would be.

Can you provide what that should be?

original line was

$output .= '<div class="iconbox_icon heading-color avia-font-'.$font.'">'.$display_char.'</div>';

edited to

if(!empty($link))
	{
	$output .= "<a href='$link' title='".esc_attr($title)."' $linktarget>";
	$output .= '<div class="iconbox_icon heading-color avia-font-'.$font.'">'.$display_char.'</div>';
	$output .= '</a>';
	}
	else
	{
	$output .= '<div class="iconbox_icon heading-color avia-font-'.$font.'">'.$display_char.'</div>';
	}