How to make a languages selector button with flag? (html + js)
12,710
Solution 1
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>
Solution 2
As per the codepen you attached, you need to include some stylesheets as follows.
<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">
Also add the following scripts,
<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>
<script>
$(function(){
$('.selectpicker').selectpicker();
});
</script>
Author by
rootbot
Updated on June 04, 2022Comments
-
rootbot almost 2 years
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>
-
ControlAltDel about 4 yearsseems like you might be missing the CSS part of this
-
-
rootbot about 4 yearsSorry, I just made that mistake in my post here, but not in my code. I'll edit my post.
-
rootbot about 4 yearsYou're absolutely right and your point is well taken. I did add the scripts and stylesheets, but it still doesn't work. I put the styles in the header, the scripts in the body, but the appearance remains the same. Any ideas?