How to deal with flickering icons from fonts?

Question

HTML

On my mobile application, the user often walks back and forth through the pages. Iconic fonts from bootstrap and from flaticon are used. I am very pleased with them, everything is fine, but one BUT - when the page is reloaded, they "blink", i.e. for a period of time they are gone. While the pictures are immediately displayed.
How to deal with blinking? Maybe wait for the page to fully load? But I don't think this solution is very cool. It would be better if a particular div block appeared only after it was completely reloaded. Or is there a more direct solution?

Answer 1

Maybe wait for the page to fully load?

A very good idea, by the way. Saves the user from the appearance of the site in the process of loading, and crookedness.
In principle, this is possible, but the site should be equally beautifully laid out with and without icons. For this, you can show icons, for example, through jquery, initially setting them to opacity 0, and after loading the content, show opacity 1, but this is a hack, and I consider it not the best solution. The block does not understand if it is fully loaded or not if you are using icon fonts.