【7.1ch対応】PS4で使える本当にオススメなヘッドセット5選!

SimplicityでFontAwesomeが表示出来ない?私が行った対処法

wordpress

どもっ!たりょちです。(@taryoti08)

今回SimplicityでFontAwesomeを利用する方法となにをしても表示出来なかった私の場合の対処方法を紹介します。

※当ブログもSimplicityのテーマを利用しています。現在は有料テーマであるSANGOに変更しています。

注意
ここに文章始めに申し上げておりますが、私に専門性は全くなく完全な素人が頑張って表示出来ただけの半ばチャレンジ記事です。
なので解決出来た理由やなぜか?の説明は出来ませんw対処した全行程は記載しておりますので、どなたかの参考になれば幸いです。

FontAwesomeが表示出来ない?私の症状を紹介

いやーまじで困りました。

□←これに困り果てました。

私はなにもしてもこの□のやろーが消えなくて半ばアイコンを利用するのを諦めてました・・・

sikaku

記事にコードを入力するとこうなるんです。

グローバルメニューで使用したかったので、ナビゲーションラベルのHOMEの前にコードを入力すればすぐに反映されて使えます!というサイトさんが多かったのでその通りにHOMEの前に入力していましたが結局ダメでした。

 

ナビゲーション

このような状態です。

メニューバーにかっちょよくアイコンを入れて視認性も良くしたい!そう思っていたのですが・・・

しかし!試行錯誤を繰り返しなんとか利用出来るようになりました!

結局どこもその方法を書いていなくて(自分の理解力がないだけ)自己解決したので誰かのお役に立てればと記事にしようと思ったわけです。

今回アイコンを導入する上で参考にさせていただいたサイト様を紹介しておきます。
http://vdeep.net/simplicity-stinger5-icons

SimplicityでFontAwesomeを利用する方法

今回は私が行ってみた対処を全行程で紹介します。

紹介する方法のどれかで解決出来ればいいですね!

ちなみに私がどうしても追加したかったものがこれです。

コードも載せておきます。

HTML
<i class="fas fa-home"></i>

2000以上の種類があるFontAwesomeは下のリンクからどうぞ!

FontAwesomeの公式ページはこちら

公式ページを開いて上記にあるiconをクリック。

色々なアイコンが出ますのでお気に入りのものを選択してください。

今回はhomeで検索した仮定で進めます。

下記画面が出ますが入力すべきコードは緑色のラインの場所です。

setuei

コピーをしたら記事画面に戻り貼り付けしてみて下さい!

いかがですか?w

これを記事に貼り付けてみて成功した方、おめでとうございます。

ダメだった方はもう少しお付き合いください。

simplicityは元々FontAwesomeが利用出来る

simplicityにはデフォルトでFontAwesomeが利用出来るようになっているらしく、そのままコードを入れてしまえば使えるという記事が多いですね!

実際に利用出来るんでしょう。

ただ私は出来ませんでした・・・

プラグインも設定なく利用出来るみたいで、普通にコードを打ち込んでみてもどうしても□が表示されてしましました。

プラグインを入れてみた

プラグインもあるみたいですね!

これで出来たやろ!?と思いすぐダウンロード作業開始。

Font Awesome 4 Menusというプラグインをワードプレスで新規追加し、有効化→再度記事に入力。

変わりませんでした。笑

ただし!!

このプラグインを入れた状態でクラス名を使うとアイコン化出来たとの記事が!

参考にしたサイト様

https://ikumen-sim.net/simplicity_awesome_nabi

光が差したと思いさっそく実践。

念の為に当ブログでも紹介しておきます。

※プラグインは有効化のままで!

説明分

表示オプションをクリック

 

CSS

チェックを入れるとメニューのタブにいままでなかったCSS classが追加されます。

 

クラス名

上記のサイト様ではここにクラス名入力とのことだったんですが・・・

(サイト様が悪いというわけではありません!汗)

 

ほめ

 

どこ?!笑

素人が手出そうとするからこうなる。

CSS classにhome入力してもダメ。

 

コード内にあるfa-homeでもダメ。

あぁもう詰んだ。  

そう思いながらまた白目になってサイト巡回してました。

ふと気づくと記事の一番上で紹介させていただいているサイト様があります。

そのサイト様の記事の中にツイッターのアイコンのhtml codeを紹介されているのですが、それをおもむろに記事に貼り付けてみたんです。

下記が紹介されているコード

HTML
<i class="fa fa-twitter"></i>

そしたら<ピヨ

は??

なんでお前は表示出来るねん・・・・

いやまてなにかヒントはないか・・・と考えてみました。

表示出来るものは< i   class=”fa fa・・・なんですが、表示出来ないFontAwesomeのサイトでは表記が違うんです。

大体<i   class=”fas fa・・・などではじまってるんです!

これはきたかもわからんということでいままでダメだったところの「S」を抜いて見ました。

はい、表示出来ました。

 

グローバルメニュー

強烈なアハ体験。

中にはsだったりbだったりするのに合わせて抜いて見てください!

どうしてもダメな人は試してほしい。

僕はこれで出来ました!!

 

まとめ

まだまだHTMLだとかCSSとか初心者で難しいです。

これ慣れたら自分で弄れたりコード変えたり楽しそうですよね。

今回の表示出来た理由は恐らくテーマのバージョンだったりFontAwesomeのバージョンの違いとかなんでしょうけどわしゃわからん。

追記
2018/4/21追記:https://fontawesome.com/v4.7.0/icons/ここのFontAwesomeのHPでは上記の方法、リンク先の方法でもいけました!やはり違うバージョンの方を私は見てたみたいです!笑

はい!表示出来たので無事メニューバーに素敵なアイコンを揃えることが出来ました!

ブログをする上で徐々に勉強出来たらなと思っています。

この記事が誰かの役に立てれば幸いです!!

それでは!!ばいち!

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です