Puppeteer - missing Unicode icons - puppeteer

I'm rendering a fragment of my page into a PNG using html-to-image and then downloading the result into a file using puppeteer. Everything works fine but when I run it in a docker container that's build upon alpine image, some Unicode icons are not rendered. For example - when text includes a "rocket" icon (🚀 unicode code U+1F680) then in the result image is just a square.
I tried to install some apk packages with font but it's still the same. Any idea?

Related

Why do Webp images not load in VScode but they load in Repl.it?

Why do Webp images display this error on VScode:
error
But they work fine on another IDE such as Repl.it? I did not change anything. The paths to the pictures are the exact same but for some reason the images work fine on repl.it but on VScode they display that error. Anyone know why this happens?
I cant share any code since its a whole project but to basically link an image, I do this both on VScode and Repl.it: ./assets/img/image.webp
assets is a folder in the root
Can VScode render Webp images or is that ability not supported as of right now?

How do I use a unicode character in a font family in HTML?

I am developing a game using HTML. I found a font I want to use. I installed it correctly on the computer, and I imported it into the CSS file, however; I am unable to use the character that I specifically wanted from the font. It loads in the editor, but not when the page renders on the frontend.
The character I really like is &
My browser that I load my webpage with is Chrome.
The editor that I can see the character in is Visual Studio Code.
I use the VS Code Live Server to load the page into chrome, and Icon Font File Preview extensions.
How do I resolve the issue? What information should I add?

font-mfizz displaying icons as square

Im using font-mfizz for icons on my site and for whatever reason they always appear as squares. I have all the fonts installed in all different formats and im still getting no results.
here is the code that I have
<i class="icon-javascript-alt"></i>
I had the same problem. When you download the font-mfizz package, simply paste all files (css, eot, svg, ttf, woff) to your project folder.

Images aren't loading online on my GitHub web page

GitHub won't load the images in my images folder. It loads the background image fine, and all the images load when I launch the page offline. I've made sure the images only begin with letters, and tried matching the image file names with the path names in the index.html file case sensitive-wise but still no luck.
website: http://rpboyer15.github.io/sounds-of-the-storm/
repo: https://github.com/rpboyer15/sounds-of-the-storm
Paths are case sensitive. For example in your repository, you have brightwing.jpg and in your HTML you have Brightwing.jpg which will result in a 404. If you use the Chrome Dev Tools and adjust the URL using Inspect Element and it will load properly.
PS: Heroes is an awesome game.

Font Awesome does not work in browser, but works in codepen

I downloaded Font Awesome today and did it a try. In firefox and chrome (latest versions) it appears as blank squares. If a use the CDN link, it doesnt even work, the standard bullets appear instead of the blank squares. But in codepen.io, it just worked fine, using the CDN.
The html i used is just the same as the example of the lists, which is here: http://codepen.io/pietrofxq/pen/BCaoD
Does someone knows the problem?
You are using a schemaless URL to access the CDN.
If you are trying to open the page from your disk (schema being file://) then it will fail is it will use the same schema to access the CDN
Try with a full URL http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css
If you are calling it from a server, then make sure that the font files are delivered correctly. Some servers need to be told to allow the font files to be accessed.
(use the console to see if they load ok)