戯れ言葉

Font Awesomeがver5になって困ったことに

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

 Font Awesome Icons がVer5(Font Awesome 5...  )になってちょっと困ったことが起きました。
 只のバージョンアップではなくて、 Font Awesome 4.7.0  との互換性がありません。
 この外部リンクのアイコン  を表示させるのに、4迄では
 <i class="fa fa-external-link" aria-hidden="true"></i>
 とやっていたのですが、
 5以降では、
 <i class="fas fa-external-link-alt"></i>
 となり、ユニコードも、
 f08e から f35d に変わります。
 このアイコンは個別の記事の中に多用してきています。
 現在使用中のテンプレートはまだ ver4.7.0 なのですが、将来というか、現行のバージョンであるver5に移行するとその時点で全ての記事の書き換えが必要になります。
 このFont Awesome のバージョンに嫌な予感がしていたのですが、的中してしまいました。
 で、どうするかなんですが、このアイコンの表示をCSSで指定出来ないかと言うことです。

 それが出来れば、記事側のHTMLはclass指定しておき、後日ver5に移行した時にCSSを書き替えれば全て一挙に変更できるというわけです。
 
 現在のver4.7.0の状況下のCSSで

.extlink::after {
  font-family: "fontawesome";
  content: "\f08e";
}

 と指定し、HTMLを
  <a class="extlink" href="・・・・" target="_blank">リンク先名&ensp;</a>
 としてやると、リンク先名の後に外部リンクのアイコンが表示されます。
 記事中のHTMLはこのままの記述で、ver5になった時にCSSを

.extlink::after {
  display: none;
  content: "\f35d";
  font-family: "Font Awesome 5 Solid";
}

 と書き替えればOK。
 実際はこの部分をコメントアウト(コメント文 /* */)にして残しておきます。
 ver5になったときの指定はJavascriptの方を選びます。
 CSSのリンクではこの方法は旨く行かないようです。
 私が使用させてもらっているテンプレートの先生の流れがJSなので。
 Font Awesome5の使い方:by Akira先生  参照

 その他にもいくつかFont Awesomeのアイコンを使った記事があるのですが、2,3記事なので無視。
 いやぁ 今後このフォントを使うのは気をつけます。
 個別の記事中に使うのはもってのほかです。えらい目に遭いました。
 copyrightの所にも使ってたんですが、&copy; の©に変更です。

 ただFont Awesome ではこういった疑似要素は非推奨になってるのが気になります。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます