Image container
Using block-box cover flex-box:
- block-box has height or width
- flex-box has flex-direction and height or width
<div style=height: 50px; width: auto">
<div id="container" style="display: flex; flex-direction: row-reverse; height: 100%;">
</div>
</div>
Using jQuery to append image into container
var img = $('<img>');
img.attr('src', 'the address of img');
img.css({"height": "100%", "width": "auto%"});
img.appendTo('#container');
Or using jQuery to remove image from container
var iconName= 'the name of icon';
$('img').each(function(i, el){
if($(this).attr('src').indexOf(iconName) > -1){
$(this).remove();
}
});
Here is my code with bootstrap 4
icon.png
<body>
<button type="button" class="btn btn-primary features-icons-btn" name="facebook">Fackbook</button>
<button type="button" class="btn btn-primary features-icons-btn" name="twitter">Twitter</button>
<button type="button" class="btn btn-primary features-icons-btn" name="instagram">Instagram</button>
<button type="button" class="btn btn-primary features-icons-btn" name="linkedin">Linkedin</button>
<button type="button" class="btn btn-primary features-icons-btn" name="youtube">Youtube</button>
<div style="height: 50px; width: auto">
<div id="features-icons" style="border: 1px solid; display: flex; flex-direction: row-reverse; height: 100%;">
</div>
</div>
<script>
$('.features-icons-btn').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
var btnName = $(this).attr('name');
$('img').each(function(i, el){
if($(this).attr('src').indexOf(btnName) > -1){
$(this).remove();
}
});
}else{
$(this).addClass('active');
var img = $('<img>');
img.attr('src', './images/' + $(this).attr('name') + '-icon-circle.png');
img.css({"height": "100%", "width": "auto%", 'margin':'0 2px'});
img.appendTo('#features-icons');
}
});
</script>
</body>
