fontawesome icon display issue in mozila firefox with html2canvas

Question

i am display font awesome css to display icon in my issue is that icon can display perfect but i am using html2cnvas js to convert that div to image. js can convert div to image perfect but my issue is when it convert to image font awesome icon cant display instead of icon it display rectangle sign. please help to find bug. my code is written below.

div which converting to image

HTML

<div id='parent_poster'>
  <span class="boxfitted">
    <i class="fa fa-apple change-color"></i>
   </span>
</div>

CSS

#author{
    margin-top: -85px;
    margin-right: 10px;
    text-align: left;
    font-weight: 600;
    overflow: hidden;
    text-align: right;
    float: right;
}
#watermark{
    display: block;
    position: static;
    margin: -102px 0px 13px 0px;
    font-size: 30px;
    font-family: 'Monopol';
}
#watermark p{
    opacity: 0.1;
}

JQuery

html2canvas javascript to convert image

$("#generate_quote").on('click', function() {
    $(".watermark").show();
    html2canvas($("#parent_poster"), {onrendered: function(canvas) {
            $(".watermark").hide();
            var myImage = canvas.toDataURL("image/jpeg");
            window.open(myImage);
        }});
 });

Answer 1

Seems like an issue from an older html2canvas version. You can check the issue here (https://github.com/niklasvh/html2canvas/issues/314).

You can download the 5.0 version and try to run it again. or, if you don't want to change it, you can change the code in html2canvas of your version following this commit. https://github.com/kabushi/html2canvas/commit/0744de82b68a1922315f076e244a586445e5636b