I have been working on a new side project (called WriteTrack since you ask!) which is based on the bootstrap framework and makes use of both Font Awesome and Glyphicons. I had got far enough along the path to want to check out the look on a mobile device which is when I came across the issue that you can see on the left hand side of the header image above. They weren’t rendering as expected at all – the desired look is what you can see on the right hand side of the header image above.
A search of the usual places suggested all sorts of potential solutions such as loading of the fonts in different ways in the CSS. In the end the solution was a lot simpler and required zero code changes.
The issue is simply to do with iOS content blockers in Safari – go to Settings -> Safari -> Content Blockers and turn off any content/ad blocker that you might have enabled and then go back to Safari and refresh the page. Bingo! You should find that the icons now render correctly,
