Изменить ярлык для флага

Question

Теперь у меня есть только один глификон с меткой, но я хочу это изменить его для флага? как я могу это сделать, если я хочу использовать .jpeg вместо глификона?

$(document).ready(function() { 
if ((window.location.href.indexOf("lang=en") > 0)) { 
    $("#language").html("<span class='glyphicon glyphicon-globe' aria-hidden='true'></span> spanish"); 
    $("#language").attr("href", "") 

} 
else { 
    $("#language").html("<span class='glyphicon glyphicon-globe' aria-hidden='true'></span> ENGLISH SITE"); 
} 

$("#language").click(function (event) { 
    event.preventDefault(); 
    var hash = location.hash; 
    console.log(hash); 
    var strloc = location.href.replace(hash, ""); 
    if ((strloc.indexOf("?lang=en") > 0)) { 
     strloc = strloc.replace("?lang=en", "?lang=es") 

    } 
    else { 
     if ((strloc.indexOf("?lang=es") > 0)) 
      strloc = strloc.replace("?lang=es", "?lang=en"); 
     else 
      strloc = strloc + "?lang=en"; 
    } 
    location.assign(strloc + hash); 
}); 

}); 

Answer 1

Вы можете использовать фоновое изображение на своих <span> элементах. Пример:

.flag { 
 
    width: 16px; 
 
    height: 11px; 
 
    background:url(http://i.stack.imgur.com/7ndjR.png) no-repeat; 
 
    display: inline-block; 
 
} 
 

 
.flag.flag-ad {background-position: -16px 0} 
 
.flag.flag-ae {background-position: -32px 0} 
 
.flag.flag-af {background-position: -48px 0} 
 
.flag.flag-al {background-position: -64px 0} 
 
.flag.flag-am {background-position: -80px 0} 
 
.flag.flag-ao {background-position: -96px 0} 
 
.flag.flag-as {background-position: -112px 0} 
 
.flag.flag-at {background-position: -128px 0} 
 
.flag.flag-au {background-position: -144px 0} 
 
.flag.flag-az {background-position: -160px 0} 
 
.flag.flag-ba {background-position: -176px 0} 
 
.flag.flag-bd {background-position: -192px 0} 
 
.flag.flag-be {background-position: -208px 0} 
 
.flag.flag-bf {background-position: -224px 0} 
 
.flag.flag-bg {background-position: 0 -11px}

<ul> 
 
    <li><a href="#"><span class="flag flag-ad"></span> Andorra</a></li> 
 
    <li><a href="#"><span class="flag flag-ae"></span> United Arab Emirates</a></li> 
 
    <li><a href="#"><span class="flag flag-af"></span> Afghanistan</a></li> 
 
    <li><a href="#"><span class="flag flag-al"></span> Albania</a></li> 
 
    <li><a href="#"><span class="flag flag-am"></span> Armenia</a></li> 
 
    <li><a href="#"><span class="flag flag-ao"></span> Angola</a></li> 
 
    <li><a href="#"><span class="flag flag-as"></span> American Samoa</a></li> 
 
    <li><a href="#"><span class="flag flag-at"></span> Austria</a></li> 
 
    <li><a href="#"><span class="flag flag-au"></span> Australia</a></li> 
 
    <li><a href="#"><span class="flag flag-az"></span> Azerbaijan</a></li> 
 
    <li><a href="#"><span class="flag flag-ba"></span> Bosnia and Herzegovina</a></li> 
 
    <li><a href="#"><span class="flag flag-bd"></span> Bangladesh</a></li> 
 
    <li><a href="#"><span class="flag flag-be"></span> Belgium</a></li> 
 
    <li><a href="#"><span class="flag flag-bf"></span> Burkina Faso</a></li> 
 
    <li><a href="#"><span class="flag flag-bg"></span> Bulgaria</a></li> 
 
</ul>

Источник: https://www.flag-sprites.com