htmlcssthymeleafspring-thymeleaf

adding flags to Thymeleaf template with flag-icon-css

This is my template:

<!DOCTYPE html>
...
<head>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.7.0/css/flag-icons.min.css">
..

     <ul>
                    <span class="flag-icon flag-icon-gb"></span> <!-- 🇬🇧 English -->
                    <span class="flag-icon flag-icon-es"></span> <!-- 🇪🇸 Español -->
                    <span class="flag-icon flag-icon-fr"></span> <!-- 🇫🇷 Français -->
                    <span class="flag-icon flag-icon-pt"></span> <!-- 🇵🇹 Português -->
                </ul>
..
</html>

but I don't see any flag in the page

enter image description here

Solution

  • The correct format is as follows, add the class fi and fi-xx to an empty span. fi-xx where xx is the alpha-2 code representing a country. A list of the alpha-2 code can be found on this website https://www.iso.org/obp/ui

    Examples:

    <span class="fi fi-jp"></span> <!-- flag for japan -->
<span class="fi fi-gb"></span> <!-- flag for uk -->
<span class="fi fi-vn"></span> <!-- flag for vietnam -->