fontawesomeの取込をJSからCSSに変更したら一部のアイコンが表示できなくなる
2021-12-30
2021-12-30
fontawesomeをもともとDLではなく、KitのJSを取り込んで表示していましたが、
諸々の事情でCSSで取り込んで表示しようとしてます。しかし、一部のアイコンが表示されない現象が発生しました。
404も出てない、トウフ(□みたいなやつ)にもなってない…。
調査してみると、もともと表示していたアイコンはDLしてきた5.15のバージョンのものではなくバージョン4のアイコンが紛れていたようです。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" crossorigin="anonymous">
※ ↑だけではVer4は当然含まれません
Ver4のものは当然表示させない(Ver4のものを見つけ出し、Ver5のものに差し替える)が一番いい方法なのですが、
全画面網羅しないと見つけられなさそう…JSに戻すしか無いのか…
と思ったら
https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
↑こちらからダウンロードしたファイルに「v4-shims.min.css」というファイルがありました。
なので、Ver5のCSSに加えて下記のように追加したらひとまず表示できるようになりました。(バージョンは適宜変えましょう)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css" crossorigin="anonymous">
かなりささやかな件でしたが、一部だけ表示出来ないというドキッとした瞬間だったので備忘録として残します
諸々の事情でCSSで取り込んで表示しようとしてます。しかし、一部のアイコンが表示されない現象が発生しました。
404も出てない、トウフ(□みたいなやつ)にもなってない…。
調査してみると、もともと表示していたアイコンはDLしてきた5.15のバージョンのものではなくバージョン4のアイコンが紛れていたようです。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" crossorigin="anonymous">
※ ↑だけではVer4は当然含まれません
Ver4のものは当然表示させない(Ver4のものを見つけ出し、Ver5のものに差し替える)が一番いい方法なのですが、
全画面網羅しないと見つけられなさそう…JSに戻すしか無いのか…
と思ったら
https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
↑こちらからダウンロードしたファイルに「v4-shims.min.css」というファイルがありました。
なので、Ver5のCSSに加えて下記のように追加したらひとまず表示できるようになりました。(バージョンは適宜変えましょう)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/v4-shims.css" crossorigin="anonymous">
かなりささやかな件でしたが、一部だけ表示出来ないというドキッとした瞬間だったので備忘録として残します