如何制作带有标志的语言选择器按钮?(HTML + JS) [英] How to make a languages selector button with flag? (html + js)

问题描述

我正在尝试使用HTML&标记中的带有标志的语言选择器按钮.JS，但是我得到的结果与我在这里找到的示例不符: https://codepen.io/brapastor/pen/BWyomB 选择器选择器有效，但标志和外观不起作用.请问我在做什么错?

I'm trying to make a language selector button with flags in HTML & JS, but the result I'm getting doesn't match the example I found here: https://codepen.io/brapastor/pen/BWyomB The picker selector works, but the flag and the appearance doesn't works. What am I doing wrong please ?

 <select class="selectpicker" data-width="fit">
    <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option  data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>

<script type='text/javascript'> $(function(){
    $('.selectpicker').selectpicker();
});</script>

推荐答案

Codepen 允许从外部来源添加CSS和Javascript库，除非您单击settings/gear链接以显示它们，否则这些库是不可见的，这是您应如何包含它们:

Codepen allow for CSS and Javascript libraries to be added from extenal sources, and these libraries are not visible unless you click on the settings/gear link to expose them, here is how you should include them:

$(function(){
  $('.selectpicker').selectpicker();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>`
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<select class="selectpicker" data-width="fit">
    <option data-content='<span class="flag-icon flag-icon-us"></span> English'>English</option>
  <option  data-content='<span class="flag-icon flag-icon-mx"></span> Español'>Español</option>
</select>

这篇关于如何制作带有标志的语言选择器按钮?(HTML + JS)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！