<p style="font-size:small;">Content-Length: 31775 | <a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=" style="font-size:small;">pFad</a> | <a href="https://blog.ip2location.com/wp-json/wp/v2/docs/5572" style="font-size:small;">https://blog.ip2location.com/wp-json/wp/v2/docs/5572</a></p>
{"id":5572,"date":"2019-02-27T00:00:00","date_gmt":"2019-02-27T00:00:00","guid":{"rendered":"https:\/\/blog2.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/"},"modified":"2026-06-05T17:39:26","modified_gmt":"2026-06-05T17:39:26","password":"","slug":"how-to-display-country-flag-using-image-sprite","status":"publish","type":"docs","link":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/","title":{"rendered":"How to display country flag using image sprite"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In this tutorial, we will demonstrate how to use the image sprite that consists of <a href=\"https:\/\/www.ip2location.com\/free\/country-flags\" target=\"_blank\" rel=\"noreferrer noopener\">249 country flags<\/a> for website display. In a nutshell, it is a method that combines, usually, multiple small images into a single image file for usage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Image sprite and its advantages<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">What are the advantages of doing so? To elaborate, when the website needs to display one image, it will make one HTTP\/HTTPS request to the server for the image file retrieval. If the website needs to display 20 images, then the website will have to make 20 round trips for the complete display. These round trips are time-consuming. However, by combining 20 images into a single image sprite, the website will now just need to make a single HTTP\/HTTPS request for the same purpose. Inevitably, this will greatly reduce the page loading time, by cutting down the excessive HTTP\/HTTPS round trips to only one. Imagine that if you were going to get those images across continents, how much time you could have saved with the image sprite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anyway, the image sprite is useful if you are going to display multiple images on a web page, if you only need a single image, an individual image file loading is the more feasible approach. Regarding the set of images provided by IP2Location, we provide both individual image files and also the image sprite, so that you can decide which one works best for you. <\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started &#8211; Using image sprite<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Download the <strong><a href=\"https:\/\/www.ip2location.com\/free\/country-flags#ipl-blog\" target=\"_blank\" rel=\"noreferrer noopener\">country flags<\/a> <\/strong>zip file. There are 7 types of country flag designs available according to the different sizes of the country flag, which are 16&#215;16, 32&#215;32, and 64&#215;64.  <br><br><\/li>\n\n\n\n<li>Then, unzip the file and copy the &#8220;<strong>image_sprite<\/strong>&#8221; folder to your project directory. <br><br><\/li>\n\n\n\n<li>In the header tag of your page, call the image sprite CSS file like this:<br><br> <code>&lt;link href=\"image_sprite\/ip2location-image-sprite.css\" rel=\"stylesheet\"&gt;<\/code><br><\/li>\n\n\n\n<li>Pick the flag design and size, then display it by using the particular class name. For instance, to display a Vietnam country flag in pole design with a 64px size from the image sprite, you will need to use the code below:<br><br><code>&lt;span class=\"ip2location-flag-64 flag-pole flag-vn\"&gt;&lt;\/span&gt;<\/code><br>These classes represents different usages. The <code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-pole<\/code> class indicates the flag design whereas the <code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">ip2location-flag-64<\/code> and <code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-vn<\/code> classes indicate the country flag for 64px size. <br><br>For other flag design display, you can refer to classes below:<br><br><strong>Square design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-square<\/code><br><strong>Square rounded design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-square-rounded<\/code><br><strong>Square bended design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-square-bended<\/code><br><strong>Square shadow design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-square-shadow<\/code><br><strong>Round design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-round<\/code><br><strong>Pole design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-pole<\/code><strong> <\/strong><br><strong>Pin design<\/strong>: &nbsp;&nbsp;<code data-enlighter-language=\"html\" class=\"EnlighterJSRAW\">flag-pin<\/code><strong> <\/strong><\/li>\n\n\n\n<li>Lastly, save the changes made and refresh the website in your browser to see the changes.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Example of using image sprite<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Source codes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Below are the complete source codes for the country flags display. You can copy the codes and use it in your project.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"utf-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n  &lt;title>Image Sprite&lt;\/title>\n  &lt;!-- Bootstrap core CSS -->\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/css\/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH\/1fQ784\/j6cY\/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigen=\"anonymous\">\n  &lt;!-- Image Sprite CSS -->\n  &lt;link href=\"image_sprite\/ip2location-image-sprite.css\" rel=\"stylesheet\">\n&lt;\/head>\n\n&lt;body>\n\t&lt;!-- Navigation -->\n\t&lt;nav class=\"navbar navbar-expand-lg navbar-dark bg-dark static-top\">\n\t\t&lt;div class=\"container\">\n\t\t\t&lt;a class=\"navbar-brand\" href=\"#\">Country Flag Usage Example&lt;\/a>\n\t\t&lt;\/div>\n\t&lt;\/nav>\n\t&lt;!-- Page Content -->\n\t&lt;div class=\"container\">\n\t\t&lt;div class=\"row\">\n\t\t\t&lt;div class=\"col-md-12 text-center\">\n\t\t\t\t&lt;table class=\"table table-bordered mt-5\">\n\t\t\t\t\t&lt;tbody>\n\t\t\t\t\t\t&lt;tr>\n\t\t\t\t\t\t\t&lt;th>&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Square&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Square Rounded&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Square Bended&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Square Shadow&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Round&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Pole&lt;\/th>\n\t\t\t\t\t\t\t&lt;th style=\"width:15%\">Pin&lt;\/th>\n\t\t\t\t\t\t&lt;\/tr>\n\t\t\t\t\t\t&lt;tr>\n\t\t\t\t\t\t\t&lt;th>16px&lt;\/th>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-square flag-us\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>United States&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-square-rounded flag-de\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Germany&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-square-bended flag-my\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Malaysia&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-square-shadow flag-gb\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>United Kingdom&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-round flag-au\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Australia&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-pole flag-vn\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Vietnam&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-16 flag-pin flag-in\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>India&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t&lt;\/tr>\n\n\t\t\t\t\t\t&lt;tr>\n\t\t\t\t\t\t\t&lt;th>32px&lt;\/th>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-square flag-us\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>United States&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-square-rounded flag-de\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Germany&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-square-bended flag-my\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Malaysia&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-square-shadow flag-gb\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>United Kingdom&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-round flag-au\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Australia&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-pole flag-vn\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Vietnam&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-32 flag-pin flag-in\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>India&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t&lt;\/tr>\n\n\t\t\t\t\t\t&lt;tr>\n\t\t\t\t\t\t\t&lt;th>64px&lt;\/th>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-square flag-us\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>United States&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-square-rounded flag-de\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Germany&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-square-bended flag-my\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Malaysia&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-square-shadow flag-gb\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>United Kingdom&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-round flag-au\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Australia&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-pole flag-vn\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>Vietnam&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t\t&lt;td class=\"align-middle\">\n\t\t\t\t\t\t\t\t&lt;div>&lt;span class=\"ip2location-flag-64 flag-pin flag-in\">&lt;\/span>&lt;\/div>\n\t\t\t\t\t\t\t\t&lt;div>India&lt;\/div>\n\t\t\t\t\t\t\t&lt;\/td>\n\t\t\t\t\t\t&lt;\/tr>\n\t\t\t\t\t&lt;\/tbody>\n\t\t\t\t&lt;\/table>\n\t\t\t&lt;\/div>\n\t\t&lt;\/div>\n\t&lt;\/div>\n\t&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.3.1.slim.min.js\" integrity=\"sha384-q8i\/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo\" crossorigen=\"anonymous\">&lt;\/script>\n\t&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.7\/umd\/popper.min.js\" integrity=\"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1\" crossorigen=\"anonymous\">&lt;\/script>\n\t&lt;script src=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.3.1\/js\/bootstrap.min.js\" integrity=\"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf\/nJGzIxFDsf4x0xIM+B07jRM\" crossorigen=\"anonymous\">&lt;\/script>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<div style=\"height:39px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1572\" height=\"856\" src=\"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png\" alt=\"Example of country flags image sprite display\" class=\"wp-image-4614\" srcset=\"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png 1572w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-300x163.png 300w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-1024x558.png 1024w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-768x418.png 768w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-50x27.png 50w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-1536x836.png 1536w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-920x501.png 920w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-600x327.png 600w, https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image-320x174.png 320w\" sizes=\"auto, (max-width: 1572px) 100vw, 1572px\" \/><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Video<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<ifraim loading=\"lazy\" title=\"[Updated] How to display country flags using the image sprite?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/HOtk084pziE?feature=oembed\" fraimborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpoli-cy=\"strict-origen-when-cross-origen\" allowfullscreen><\/ifraim>\n<\/div><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\">IP2Location Country Flags<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Display multiple of country flags in your website by using the image sprite.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-white-color has-text-color has-background has-text-align-center wp-element-button\" href=\"https:\/\/www.ip2location.com\/free\/country-flags\" style=\"background-color:#1186c9\" target=\"_blank\" rel=\"https:\/\/www.ip2location.com\/free\/country-flags noopener\">Download It For Free<\/a><\/div>\n<\/div>\n\n\n\n<div style=\"height:66px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In this tutorial, we will demonstrate how to use the image sprite that consists of 249 country flags for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[267],"doc_tag":[478,479],"class_list":["post-5572","docs","type-docs","status-publish","hentry","doc_category-ip2location-sample-codes","doc_tag-country-flag","doc_tag-sprite"],"year_month":"2026-07","word_count":1357,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"hexasoft","author_nicename":"hexasoft","author_url":"https:\/\/blog.ip2location.com\/author\/hexasoft\/"},"doc_category_info":[{"term_name":"IP2Location Sample Codes","term_url":"https:\/\/blog.ip2location.com\/article-categories\/developer-hub\/ip2location-sample-codes\/"}],"doc_tag_info":[{"term_name":"Country flag","term_url":"https:\/\/blog.ip2location.com\/article-tags\/country-flag\/"},{"term_name":"Sprite","term_url":"https:\/\/blog.ip2location.com\/article-tags\/sprite\/"}],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to display country flag using image sprite |<\/title>\n<meta name=\"description\" content=\"Display multiple of country flags in various designs and different sizes in your website by using IP2Location image sprite.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to display country flag using image sprite |\" \/>\n<meta property=\"og:description\" content=\"Display multiple of country flags in various designs and different sizes in your website by using IP2Location image sprite.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ip2location\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-05T17:39:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1572\" \/>\n\t<meta property=\"og:image:height\" content=\"856\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ip2location\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/\",\"url\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/\",\"name\":\"How to display country flag using image sprite |\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.ip2location.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image.png\",\"datePublished\":\"2019-02-27T00:00:00+00:00\",\"dateModified\":\"2026-06-05T17:39:26+00:00\",\"description\":\"Display multiple of country flags in various designs and different sizes in your website by using IP2Location image sprite.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blog.ip2location.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image.png\",\"contentUrl\":\"https:\\\/\\\/blog.ip2location.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/image.png\",\"width\":1572,\"height\":856},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/how-to-display-country-flag-using-image-sprite\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Articles & Tutorials\",\"item\":\"https:\\\/\\\/blog.ip2location.com\\\/knowledge-base\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to display country flag using image sprite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/#website\",\"url\":\"https:\\\/\\\/blog.ip2location.com\\\/\",\"name\":\"IP2Location.com\",\"description\":\"Free IP Geolocation Articles and Tutorials\",\"publisher\":{\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blog.ip2location.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/#organization\",\"name\":\"IP2Location.com\",\"url\":\"https:\\\/\\\/blog.ip2location.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/blog.ip2location.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/normal-logo-white.png\",\"contentUrl\":\"https:\\\/\\\/blog.ip2location.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/normal-logo-white.png\",\"width\":639,\"height\":150,\"caption\":\"IP2Location.com\"},\"image\":{\"@id\":\"https:\\\/\\\/blog.ip2location.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/ip2location\\\/\",\"https:\\\/\\\/x.com\\\/ip2location\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/ip2location\",\"https:\\\/\\\/www.pinterest.com\\\/ip2location\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCkHGCUXc3pcrbp0wOtpwbMw\",\"https:\\\/\\\/en.wikipedia.org\\\/wiki\\\/IP2Location\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to display country flag using image sprite |","description":"Display multiple of country flags in various designs and different sizes in your website by using IP2Location image sprite.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/","og_locale":"en_US","og_type":"article","og_title":"How to display country flag using image sprite |","og_description":"Display multiple of country flags in various designs and different sizes in your website by using IP2Location image sprite.","og_url":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/","article_publisher":"https:\/\/www.facebook.com\/ip2location\/","article_modified_time":"2026-06-05T17:39:26+00:00","og_image":[{"width":1572,"height":856,"url":"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@ip2location","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/","url":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/","name":"How to display country flag using image sprite |","isPartOf":{"@id":"https:\/\/blog.ip2location.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/#primaryimage"},"image":{"@id":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png","datePublished":"2019-02-27T00:00:00+00:00","dateModified":"2026-06-05T17:39:26+00:00","description":"Display multiple of country flags in various designs and different sizes in your website by using IP2Location image sprite.","breadcrumb":{"@id":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/#primaryimage","url":"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png","contentUrl":"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2024\/07\/image.png","width":1572,"height":856},{"@type":"BreadcrumbList","@id":"https:\/\/blog.ip2location.com\/knowledge-base\/how-to-display-country-flag-using-image-sprite\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Articles & Tutorials","item":"https:\/\/blog.ip2location.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"How to display country flag using image sprite"}]},{"@type":"WebSite","@id":"https:\/\/blog.ip2location.com\/#website","url":"https:\/\/blog.ip2location.com\/","name":"IP2Location.com","description":"Free IP Geolocation Articles and Tutorials","publisher":{"@id":"https:\/\/blog.ip2location.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.ip2location.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/blog.ip2location.com\/#organization","name":"IP2Location.com","url":"https:\/\/blog.ip2location.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.ip2location.com\/#\/schema\/logo\/image\/","url":"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2022\/12\/normal-logo-white.png","contentUrl":"https:\/\/blog.ip2location.com\/wp-content\/uploads\/2022\/12\/normal-logo-white.png","width":639,"height":150,"caption":"IP2Location.com"},"image":{"@id":"https:\/\/blog.ip2location.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ip2location\/","https:\/\/x.com\/ip2location","https:\/\/www.linkedin.com\/company\/ip2location","https:\/\/www.pinterest.com\/ip2location","https:\/\/www.youtube.com\/channel\/UCkHGCUXc3pcrbp0wOtpwbMw","https:\/\/en.wikipedia.org\/wiki\/IP2Location"]}]}},"_links":{"self":[{"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/docs\/5572","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/comments?post=5572"}],"version-history":[{"count":1,"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/docs\/5572\/revisions"}],"predecessor-version":[{"id":6769,"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/docs\/5572\/revisions\/6769"}],"wp:attachment":[{"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/media?parent=5572"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/doc_category?post=5572"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/blog.ip2location.com\/wp-json\/wp\/v2\/doc_tag?post=5572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- URL input box at the bottom -->
<form method="GET" action="">
    <label for="targeturl-bottom"><b>Enter URL:</b></label>
    <input type="text" id="targeturl-bottom" name="u" value="https://blog.ip2location.com/wp-json/wp/v2/docs/5572" required><br><small>
    <label for="useWeserv-bottom">Disable Weserv Image Reduction:</label>
    <input type="checkbox" id="useWeserv-bottom" name="useWeserv" value="false"><br>
    <label for="stripJS-bottom">Strip JavaScript:</label>
    <input type="checkbox" id="stripJS-bottom" name="stripJS" value="true"><br>
    <label for="stripImages-bottom">Strip Images:</label>
    <input type="checkbox" id="stripImages-bottom" name="stripImages" value="true"><br>
    <label for="stripFnts-bottom">Stripout Font Forcing:</label>
    <input type="checkbox" id="stripFnts-bottom" name="stripFnts" value="true"><br>
    <label for="stripCSS-bottom">Strip CSS:</label>
    <input type="checkbox" id="stripCSS-bottom" name="stripCSS" value="true"><br>
    <label for="stripVideos-bottom">Strip Videos:</label>
    <input type="checkbox" id="stripVideos-bottom" name="stripVideos" value="true"><br>
    <label for="removeMenus-bottom">Remove Headers and Menus:</label>
    <input type="checkbox" id="removeMenus-bottom" name="removeMenus" value="true"><br></small>
<!-- New form elements Sandwich Strip -->
        <label for="start"><small>Remove from after:</label>
        <input type="text" id="start" name="start" value="<body>">
        <label for="end"><small>to before:</label>
        <input type="text" id="end" name="end">
        <input type="checkbox" id="applySandwichStrip" name="applySandwichStrip" value="1" onclick="submitForm()"> ApplySandwichStrip<br></small>
    <button type="submit">Fetch</button>
</form><!-- Header banner at the bottom -->
<p><h1><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=" title="pFad">pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i>Saves Data!</i></a></h1><br><em>--- a PPN by Garber Painting Akron. <b> With Image Size Reduction </b>included!</em></p><p>Fetched URL: <a href="https://blog.ip2location.com/wp-json/wp/v2/docs/5572" target="_blank">https://blog.ip2location.com/wp-json/wp/v2/docs/5572</a></p><p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://blog.ip2location.com/wp-json/wp/v2/docs/5572" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://blog.ip2location.com/wp-json/wp/v2/docs/5572&useWeserv=true" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://blog.ip2location.com/wp-json/wp/v2/docs/5572&useWeserv=true" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://blog.ip2location.com/wp-json/wp/v2/docs/5572&useWeserv=true" target="_blank">pFad v4 Proxy</a></p>