Implementing Google Translate with custom flag icons

In this article, we will create Google Translate button with custom flag icons. It makes your website more accessible and easy-to-use for people from all over the world.

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://app.3schools.in/logo.png" height="20" width="20">English</li>

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

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

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

</ul>

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>

Click on the Try it Yourself » button to open the code in our online code editor. Live Demo is here and you can find all the images from wikipedia.