Customized icons in handheld menu not working

  • Resolved irumsohale

    (@irumsohale)


    4 years, 10 months ago

    Hello
    I am using below code to add 5 icons in handheld menu. icons are not displaying. What am i doing wrong here. Please guide

    function jk_remove_handheld_footer_links( $links ) {
	unset( $links['my-account'] );
//	unset( $links['search'] );
//	unset( $links['cart'] );
	return $links;
}
//Removing all links together 
/*
add_action( 'init', 'jk_remove_storefront_handheld_footer_bar' );
function jk_remove_storefront_handheld_footer_bar() {
  remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
} */
//adding a link
add_filter( 'storefront_handheld_footer_bar_links', 'jk_add_home_link' );
function jk_add_home_link( $links ) {
	$new_links = array(
		'phone' => array(
			'priority' => 10,
			'callback' => 'jk_phone_link',
		),'whatsapp' => array(
			'priority' => 20,
			'callback' => 'jk_whatsapp_link',
		),'envelope' => array(
			'priority' => 30,
			'callback' => 'jk_envelope_link',
		)
		
	);
	$links = array_merge( $new_links, $links );
	return $links;
}
function jk_envelope_link() {
//	echo '<a href="mailto:[email protected]">' . __( 'envelope' ) . '</a>';
	echo '<a href="mailto:[email protected]"><i class="fa fa-envelope fa-3x" aria-hidden="true"></i></a>';
}
function jk_whatsapp_link() {
//	echo '<a href="https://api.whatsapp.com/send?phone=90">' . __( 'whatsapp' ) . '</a>';
echo '<a href="https://api.whatsapp.com/send?phone=90"><i class="fa fa-whatsapp fa-3x" aria-hidden="true"></i></a>';
}
function jk_phone_link() {
//	echo '<a href="tel:+920">' . __( 'phone' ) . '</a>';
echo '<a href="tel:+900"><i class="fa fa-phone fa-3x" aria-hidden="true"></i></a>';
}

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • You need to apply some CSS to the ::before pseudo-element for the anchor links such as the following

    .storefront-handheld-footer-bar ul li.phone > a::before {
  content: "\f095";
}

.storefront-handheld-footer-bar ul li.whatsapp> a::before {
  content: "\f232";
  font-family: "FontAwesome";
}

.storefront-handheld-footer-bar ul li.envelope > a::before {
  content: "\f0e0";
}
    Thread Starter irumsohale

    (@irumsohale)

    Thank you so much….

    Can you help me to put the whatsapp link on my website too?

    The other icons work but the whatsapp does not.

    I followed the same steps as above. That your code from this post is working the whatsapp link?

    Thread Starter irumsohale

    (@irumsohale)

    Have you included font awesome CSS ?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Customized icons in handheld menu not working’ is closed to new replies.