Google Translate with custom flag icons

 

First, we will create a simple Google translate button. If you don't know how to add Google translate button on your website, you can follow that article.

Then we will create unordered list with four li elements (you choose more). Inside the li elements, we will add the images and the name of the languages. Like this :

<ul>
  <li data-lang="English"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0b/English_language.svg/68px-English_language.svg.png" height="20" width="20">English</li>

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

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

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

Finally, we will write some JQuery code. Whenever the li element is clicked, a anonymous function will be called.

<script type="text/javascript">
    $('ul li').click(function(){
      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>