JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
The top one is a regular dom element and the bottom is the canvas.
The star is missing from the canvas on Safari and Internet Explorer 11.

<div id="test" style="padding:20px; border:1px solid black; margin:20px 0px;">
	<span class="glyphicon glyphicon-star"></span>
</div>

JavaScript

$(document).ready(function() {
	html2canvas(document.getElementById('test'))
		.then(function(canvas) {
			document.body.appendChild(canvas);
		})
		.catch(function(error) {
			console.log(error);
	});
});