Replace toggle icon with another entypo-fontello font OR use a png - Support

Viewing 30 posts - 1 through 30 (of 53 total)

1 2 →

Author

Posts
January 24, 2014 at 4:05 am #214278

webWahine
Participant

Hello

I have looked at a number of posts and tried the code from one to replace the entypo-fontello icon for the small device toggle button with 2 pngs (one for open and one for closed) that didn’t work; I’d be happy to replace the current one…

data-av_icon=”” data-av_iconfont=”entypo-fontello”>

…with the simple 3 horizontal bands instead –

☰
U+2630
☰

but I would also be interested in swapping out the font with a png instead. Please let me know how to go about both options, if that is not too much trouble. Thank you :)

January 26, 2014 at 6:50 pm #215048
Dude
Participant
Hey webWahine!

Kriesi doesn’t use an icon for the toggle symbol but just some css code. If you want to replace it with an icon open up wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/toggles.php and search for
```

```
Replace this code with an html img tag ( http://www.w3schools.com/tags/tag_img.asp ) which points to your icon.

Cheers!
Peter
January 27, 2014 at 8:42 pm #215491

webWahine
Participant

Mmmm, I’m a bit confused because when I inspect the element it and turn off the font-family in the styles the icon changes to a rectangle; see my screen shot here for what I am inspecting:

Also, I changed line 216 in toggles.php to this:

$output .= ‘ ’;

and it didn’t change the icon. Please advise; I’m also curious as to where the css is for this, please, I assume for ‘vert_icon’ and ‘hor_icon’. Thanks again! :)

January 27, 2014 at 9:13 pm #215504

webWahine
Participant

Sorry, i didn’t wrap the code in code tags –
$output .= ' <img src="http://topaz.parkhomes.ca/images/toggleIcon.png" alt="toggle icon">';

January 29, 2014 at 9:57 am #216274
Dude
Participant
Hi!

Ah – yes. I thought you mean the toggle/accordion shortcode symbol :)

If you want to replace the menu toggle icon open up functionsphp and search for:
```
'mobile_menu'	=> array( 'font' =>'entypo-fontello', 'icon' => 'ue8a5'),
```
Replace ue8a5 with your char code and change the font family if necessary (i.e. if you want to use a icon from a custom fontello.com icon set).

Cheers!
Peter
January 29, 2014 at 8:21 pm #216603

webWahine
Participant

Thanks, Peter, but when I go here to look at the char codes:

The one that is currently in Enfold is noted as this: U+E005 
But in your code it’s described as this: ‘ue8a5’
I want to use the simple ‘list’ icon, noted as this: U+2630 ☰
So how did you get the ue8a5? I don’t know what to replace it with because there doesn’t seem to be any obvious connection on their char code page with your font icon id. Thanks again; sorry to be a pest :)

January 30, 2014 at 9:20 am #216850
Dude
Participant
Hey!

Try to replace this line in functions-enfold.php
```
$items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown"><a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'></a></li>';
```
with
```
$items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown"><a href="?s=" rel="nofollow" data-avia-search-tooltip="'.$form.'">&#9776;</a></li>';
```
If the code doesn’t work try the hex values here: http://www.fileformat.info/info/unicode/char/2630/index.htm – you need to replace ☰ with the hex value

Regards,
Peter
January 30, 2014 at 7:20 pm #217097
webWahine
Participant
Ok, that wasn’t quite it, sorry. The code did change an icon but it changed the search icon, not the mobile toggle icon. Could you please tell me where the code is for the toggle? If I could just figure out what to replace ue8a5 with the equivalent for the list icon in the line, below, we’d be all set! :)

'mobile_menu' => array( 'font' =>'entypo-fontello', 'icon' => 'ue8a5'),
- This reply was modified 10 years, 10 months ago by webWahine.
January 30, 2014 at 8:03 pm #217110
Dude
Participant
Hi!

Yes – my bad. I shouldn’t try to answer several threads simultaneously :)

Revert the change and open up header.php. Then replace
```
 	echo '<a id="advanced_menu_toggle" href="#" '.av_icon_string('mobile_menu').'></a>';
	 		echo '<a id="advanced_menu_hide" href="#" 	'.av_icon_string('close').'></a>';
```
with
```
 	echo '<a id="advanced_menu_toggle" href="#">&#9776;</a>';
	 		echo '<a id="advanced_menu_hide" href="#">&#9776;</a>';
```
Cheers!
Peter
April 19, 2014 at 11:19 pm #253529

wintner
Participant

“a id=”advanced_menu_toggle” Not found in header.php!!!!

April 21, 2014 at 2:43 pm #253805

Ismael
Moderator

Hey!

@wintner: Sorry about that. If you have the latest version of the theme, you can find most of the header codes on includes > helper-main-menu.php. I hope it helps.

Best regards,
Ismael

April 25, 2014 at 11:30 pm #256391

wintner
Participant

OK Ive replaced the code but the font isn’t loading! Where is the font specified?

April 26, 2014 at 12:30 pm #256551
Ismael
Moderator
Hi!

Thank you for using the support forum!

You can change the mobile icon character code on functions.php. Look for the mobile char codes for example on line 223:
```
'mobile_menu'	=> array( 'font' =>'entypo-fontello', 'icon' => 'ue8a5'),
```
Create a page then insert an Icon element, find the character codes by hovering over the icons:

We’ll use the char code on the example above but we’ll remove the backslash.
```
'mobile_menu'	=> array( 'font' =>'entypo-fontello', 'icon' => 'ue809'),
```
I hope that helps.

Cheers!
Ismael
April 26, 2014 at 4:41 pm #256616

wintner
Participant

Doesnt work.

April 28, 2014 at 7:32 pm #257274

wintner
Participant

Ismael, I have tried each of the team members in this threads instructions and none work for me.

Using your code, the old icon still loads.

April 30, 2014 at 7:29 am #258119

Dude
Participant

Hey!

Did you check the “font-family” value? In Ismael’s code it’s “entypo-fontello” but it may vary if you want to use a custom icon from another font set. If the icon is part of another font-family you must change this value too.

Cheers!
Peter

April 30, 2014 at 3:44 pm #258299

wintner
Participant

No, Dude, I am trying to load a entypo-fontello character.

May 1, 2014 at 8:40 pm #259039

Devin
Inactive Moderator

Hey!

Try going through the steps again. I just tested this with 2.7 by changing the value in the enfold functions.php to get the three lines code instead of the default one:
'mobile_menu' => array( 'font' =>'entypo-fontello', 'icon' => 'ue811')

Cheers!
Devin

May 2, 2014 at 7:42 pm #259528

wintner
Participant

That’s what I have:
$avia_config[‘font_icons’] = apply_filters(‘avf_default_icons’, array(
‘mobile_menu’ => array( ‘font’ =>’entypo-fontello’, ‘icon’ => ‘ue811’),
));

But the other icon loads even with cache disabled.

May 5, 2014 at 5:38 pm #260367

Devin
Inactive Moderator

If you are using a *child theme* then just adding in the same thing that is in the parent function doesn’t work. You need to use a function to tell the theme there is a replacement of that array: http://kriesi.at/documentation/enfold/change-icon-used-for-standard-theme-elements/

June 12, 2014 at 1:16 pm #278042

st0ckh0lm
Participant

Hello!

I am trying to change the search symbol to a png. It doesn’t have to toggle or anything. How do I do that?

June 12, 2014 at 6:45 pm #278171
Josue
Inactive Moderator
Hey!

Try adding this code to the Quick CSS:
```
#menu-item-search a:before {
 content: url(_IMAGE_URL_HERE_) !important;
}
```
Cheers!
Josue
June 13, 2014 at 10:50 am #278547

st0ckh0lm
Participant

Perfect! Thank you!

June 13, 2014 at 10:52 am #278548

st0ckh0lm
Participant

Which class do I edit to push it down a little bit?

June 13, 2014 at 5:48 pm #278645
Josue
Inactive Moderator
Try changing the code to:
```
#menu-item-search a:before {
 content: url(_IMAGE_URL_HERE_) !important;
 position: relative;
 top: 3px;
}
```
Best regards,
Josue
April 28, 2015 at 8:34 am #435853
aberrant
Participant
Speaking of adding this to a child theme functions.php, I added the code below and it seems to work. Replaced list icon with hamburger icon. Does this look correct? Just wanted to double check my coding. Thank you.
```
add_filter('avf_default_icons','avia_replace_mobile_menu_icon', 10, 1);

function avia_replace_mobile_menu_icon($icons)
{
$icons['mobile_menu']	 = array( 'font' =>'entypo-fontello', 'icon' => 'ue811');
return $icons;
}
```
April 28, 2015 at 4:47 pm #436181

Yigit
Keymaster

Hi!

Yes, your code looks fine :)

Cheers!
Yigit

September 23, 2015 at 5:26 pm #508005
Raphael
Participant
Hei,

So the same thing i need to chage some default charsets. in example of the star icon.
I is the “ue808”

In the functions calld supersticky? Whiy is my code not working???

HELP!!!!
```
add_action('init', function() {
	global $avia_config;
	//$avia_config['font_icons']['mobile_menu']['icon'] = 'ue824';
	$avia_config['font_icons']['supersticky']['icon'] = 'ue824';
	return $avia_config;
});
```
September 23, 2015 at 8:25 pm #508067

Josue
Inactive Moderator

Hi @hunter74!

What are you trying to do exactly?

Best regards,
Josue

September 24, 2015 at 8:11 am #508196

Raphael
Participant

I tried to give the fontello font icons a different code via the fontello Website – (not working) U+e808

Exactly i want to change the charcode of the star icon

ue808

Because my Icon has the same code
Author

Posts