Stylish Google Translate button with custom flag icons

<html>
 <body>
   <p>Stylish Google Translate button with custom flag icons / image.</p>

<ul>

<li data-lang="English"><img height="20" src="https://app.3schools.in/logo.png" width="20">English</li>

<li data-lang="Bengali"><img height="20" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Flag_of_Bangladesh.svg/90px-Flag_of_Bangladesh.svg.png" width="20">Bengali</li>

<li data-lang="Hindi"><img height="20" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Flag_of_India.svg/90px-Flag_of_India.svg.png" width="20">Hindi </li>

<li data-lang="Greek"><img height="20" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Greece.svg/90px-Flag_of_Greece.svg.png" width="20">Greek </li>

<li data-lang="Indonesian"><img height="20" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/90px-Flag_of_Indonesia.svg.png" width="20">Indonesian </li>

<li data-lang="Japanese"><img height="20" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/90px-Flag_of_Japan.svg.png" width="20">Japanese </li>

</ul>

function googleTranslateElementInit() {

new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');

}

</script>

let lang = $(this).data('lang');

let frame = $('.goog-te-menu-frame:first');

frame.contents().find('.goog-te-menu2-item span.text:contains('+lang+')').get(0).click();

});

</script> 
 </body>
</html>

Stylish Google Translate button with custom flag icons

You may like these posts :

Write Your Comment