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

I’ve the issue that my Bootstrap Icons usually are not engaged on iPhone / iOS – solely rectangle empty squares displaying up (Browser would not matter).

I do know that there are quite a lot of related questions and likewise solutions however I’ve tried all the pieces and nothings works out for me.

I am at the moment working with Vue3 & Bootstrap 5.2 – and have applied my Bootstrap Icons through npm.

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

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");
}

However this isn’t understanding for me – thanks upfront!