遊戯王のコレめせ!

コレクターの目線から遊戯王を分析するブログ。最新情報・相場情報・コレクターのための情報など幅広くまとめます。

 MENU

【2018年2月】FontAwesomeで文字化けする・正しく表示されない時の対処法



FontAwesomeに躓いた人はこれを読んで下さい、多分解決します。FontAwesomeのアイコンが文字化けしてしまう、アニメーションを付けても静止したまま動かない、設定が合っているはずなのにナゼ?を解消します。

 

 

 

 

はじめに

恐らくFontAwesomeを意気揚々と入れてみて、思ったように動作しなくて辞めてしまった人、多いんじゃないでしょうか。私もさっきまでその1人でした(笑)

導入を紹介するサイトは腐るほどあるのに、やっぱり一度躓いた時に解決策が書いてある記事のなんと少ないこと・・・。そんな私のような人の為に躓いた点を分かりやすく紹介します。

導入する際の基本的なやり方は他の記事を参照してください。

 

saruwakakun.com

moghouse.hatenablog.com

 他にもまとめている記事は沢山あると思います。

 

 

 

FontAwesomeを使用した時に起こった問題点

これらの記事に沿っても何故か私の場合正しくできませんでした。

起こった問題としては

  1. FontAwesomeをはてなブログに貼り付けると文字化けする
  2. アイコンによって文字化けする・しないがある
  3. アイコンのアニメーションの動作がおかしい・若しくは動かない

などです。勿論参照しているFontAwesomeのバージョンは新しいものを選んでいますし、無料アイコンを使っている中でのことです。

 

 

 

 

対応策1

完全な対応策ではありませんでしたが、このような方法が紹介されていました。

※こちらの記事の内容は実行しなくても良いです

 

Font Awesome が文字化け | 眉ぼってなかなか変換されない備忘

 

「i タグにfont-familyを書く」を実際に実行してみると文字化けは解消され、今まで見れなかったアイコンは見ることができました。

f:id:aqn1313:20180216043639p:plain

一応記述としてはこんな感じ。

あまりバラけさせたくないのでhtml上に記述していましたが、あまり詳しくない人からすれば記述場所・記述方法も見よう見まねじゃないと中々できませんよね。

ただこの問題点としては、アイコンは表示されてもアニメーションが正しく動作しないというところです。アニメーションを考えていない人はこの対処でも良いのかなと思います。

 

 

 

対応策2

では私の場合何が間違っていたのかというと、FontAwesomeからそのままコピーしていることに問題がありました。公式からそのままコピーすれば間違いないと思っていたのでそこが落とし穴でした。

 

f:id:aqn1313:20180216044659p:plain

 

例えば適当なアイコンを検索した時に画像の位置から持ってくる場合

<i class="fas fa-arrows-alt"></i> ではなく
<i class="fa fa-arrows-alt"></i> にしてみてください。

そうすると表示されると思います。

アイコンによって「"fa fa-○○"」となっていないものがあり、それらは私の環境の場合正しく表示されませんでした。それに気付くまでかなり時間がかかりました。

 

 

 

またアイコンに色違いがある場合

 

f:id:aqn1313:20180216112157p:plain

 

こういったものは上記で消した部分「fasやfar」で分けているためこの方法では表示できませんでした。そのため別のもっと正しい方法があると思うのですが、これでほとんどは正常に動くので私は満足しています。

 

 

 

ちなみにアニメーションに関しては

 

f:id:aqn1313:20180216045629p:plain

 

こちらの名称通りで合っていますが、こちらの場合「faa-○○」なので注意しましょう。また記述方法に関しては調べれば詳しく書かれている記事が沢山ありますので全て省きます。

 

 

 

 

その他初心者が躓くポイント

・マウスカーソルでアニメーションを動かす指定

マウスカーソルで動かす指定は「On parent hover」です。

「On parent hover」classってどこに付けるの?っていうのも躓くポイントだと思いますが、私のページの場合リンクタグに付けています。他にも<p>,<div>なんかに付けても良いでしょうね。どこをひとくくりにするかで考えると良さそうです。

 

 

・html上でcssに切り替え

意外とこれを紹介している記事は無いので分かるまで苦労します。 

<style type="text/css">
ここにcssの内容
</style>

これだけです。上記の画像にもこれが入っているので参考になるかと思います。はてなブログの携帯設定にはcssが無いのでこれを入れて初めてcssの設定ができます。初心者御用達、躓きポイントですね。

ここで「htmlとcssって何が違うの?」 みたいなことを感じた人がもし居ればそれは知識不足なので、コピペする前に最低限必ず調べた方が良いです。最低限知っておかないと途中で分からなくなる可能性が高いと思うからです。

 

 

 

まとめ

私の環境での話でした。これに気づくまではアニメーションはできないものと諦めて、大した知識も無いのにcss上から無理やりZ軸基点にして回転させる~というプログラミングをひたすら試していました…。

まとめ記事の本文からコピーしている人であれば、こういった問題も無かったかもしれませんが、ちょっとこだわってみようみたいな人は陥りやすいかもしれない問題ですね。プログラミングはいじってみないと分からないことが多いので、気付けば簡単ですが分かるまでかなり時間がかかってしまうのが難点です。

私もそこまで詳しいわけでは無いので、記事中におかしなところがありましたら「コンタクト」よりご連絡ください。あくまで私がとった対処法です。

もし他に気付いたことがあれば追加していきます。

 

それではまた。