Click here - to use the wp menu builder

javascript – Bootrap-Icons not showing up on iPhone / iOS

February 2, 2024

I have the problem that my Bootstrap Icons are not working on iPhone / iOS – only rectangle empty squares showing up (Browser doesn’t matter).

I know that there are a lot of similar questions and also answers but I have tried everything and nothings works out for me.

I’m currently working with Vue3 & Bootstrap 5.2 – and have implemented my Bootstrap Icons via npm.

I’ve added text-rendering: optimizeLegibility in my /node/modules/bootstrap-icons/fonts/bootstrap-icons.css like following as described in most of the answers.

bootstrap-icons.css:

@font-face {
  text-rendering: optimizeLegibility;
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2") format("woff2"),
url("./fonts/bootstrap-icons.woff") format("woff");
}

But this is not working out for me – thanks in advance!