Is there a way to avoid this issue? Doing something like <i class="f7-icons icon">ant</i> will briefly display the text “ant” before it actually shows the icon.
It depends on speed while font is downloaded, you can try to play with font-display css prop, probably setting font-display: block (font-display - CSS: Cascading Style Sheets | MDN) in @font-face rules for icon fonts. But it is still not perfect, and best solution will be to switch to SVG icons instead
You’re right! I didn’t notice that it was lazy loading the font when the first icon appeared. As an intermediate solution, I just put an invisible icon in the root of the app so it eagerly loads the file.
Thanks!