2019.05.06FontAwesomeという便利なツールがあります。アイコンを画像ではなく文字として扱うことができるので、大きさや色などをcssで自由にカスタマイズできちゃうという優れものです。FontAwesomeはもちろんWordPressでも使うことができます。アイコンの種類は下の公式ページから見ることができます。Awesome公式ページこんな風にいろんなかわいいアイコンが、FontAwesomeを使うと簡単に表示できちゃいます。使い方はCDNを使うやり方、実際にファイルをDLして使うやり方の2通りありますが、CDNを使う方がお手軽なのでオススメします。fa-bread-loaf"></i>のようなコードを記述するだけです。900;font-size:0.9em;}のように書いてあげるといいですね。Freeで大丈夫です。contentに入れるのがunicodeというアイコンを指定する番号みたいなものですね。正確にいうとunicode=アイコン指定番号ではないですが、今回は深入りしません。ここで注意したいのが¥もしくは\をunicodeの頭につけてあげることです。公式サイトからコピペした段階では最初からついていないので、つけ忘れに気をつけましょう。FontAwesomeでアイコンが表示されない時のチェックリストさて、ここからはちゃんと手順通りFontAwesomeを導入したはずなのになぜかアイコンが表示されない方、ハマってしまった方のためにチェックすべき項目を7つ挙げていきます。font-weightを確認する特定のアイコンは、font-weightがboldあるいは900でないとうまく表示されない仕様になっています。font-weightプロパティを設定してみましょう。最新バージョンを使っているか確認するそのFontAwesomeへのパス、ちゃんと最新版になっていますか?FontAwesomeはわりとアップデートが頻繁に起こるので、適宜公式ページをみて最新のパスになっているか確認しましょう。head内にリンクを貼れているか確認するCDNを使う際のlinkタグはhead要素内に書かれていますか?間違えてbodyのheader内に入ってたなんてことも起こりうるので確認してみましょう。font-familyが合っているか確認する基本的にはみなさんお金を払いたくないはずなのでFree版を使っていると思います。Awesomeではダメなので気をつけましょう。使いたいアイコンのunicodeが合っているか確認するunicodeは合っていますか?また、unicodeの前に¥もしくは\をちゃんとつけていますか?ちなみにunicodeは下の画像のようにアイコンページから確認できます。自分が使っているアイコンがpro版なのかfree版なのか確認するFree版を使っているあなた、その使おうとしているアイコンは本当にFree版ですか?Pro版を使おうとはしていませんか?ちなみに私がハマった原因はここでした。自分の使おうとしているアイコンがPro版かFree版かは、アイコンページを見ればわかります。Pro版にはちゃんとマークがついているのでお見逃しなく。キャッシュが残っていないか確認するフロントエンドの改修ではありがちなのですが、単にキャッシュが残っていて更新が反映されていないだけの可能性もあります。command+Shift+Rでスーパーリロードを行い、キャッシュを消しましょう。コピーut3をフォローするut3iOSも少々できるWebエンジニアut3をフォローするut3Utarog関連記事Programming【Python】ファイルの読み込み方まとめた【read,readline,readlines】Pythonにはtxtファイルの読み込み方が3種類あります。違いがよくわからず頭がこんがらがってきたので、一旦みやすくまとめてみます。3つのメソッドの違...Programming【Python】コマンドライン引数を利用できるargparseの使い方argparseというPythonの標準モジュールがあります。これを使うとプログラムの実行時にコマンドライン引数を取ることができ、コマンドライン上での柔軟なプログラム実行が可能になります。p...Programming【Swift】オプショナル型とは?4種類のアンラップ方法と共に解説!Swiftにはオプショナル型というものが存在し、このおかげで言語としてnull安全が保たれています。オプショナル型の概念を知ること自体はそこまで難しくはありませんが、オプショナルを解除するアンラップと呼ばれるものにやり方がいくつかあって...JavaScriptJavaScriptの非同期処理をできる限り正確に理解するプログラミング初心者が詰まりやすいポイントとして、非同期処理はよくあげられるかと思います。実際初心者にとっては概念自体もわかりにくいし、なぜか記事によって言い回しやら説明の仕方やらが違うので調べれば調べるほど混乱してきて、心が折れそうになり...Programming【Python】enumerate関数の使い方!アンパックとの組み合わせが便利pythonのenumerate関数って便利ですね。引数にシーケンスを指定すると、カウント(≒インデックス)と要素をまとめたタプルを返してくれます。...Programming【Python】__repr__()メソッドを使ってインスタンスの中身を表示しようPythonにはクラス内に定義でき、組み込み関数によって呼び出される__repr__()メソッドなるものがあります。これを使うと簡単にそのクラスのインスタンスの中身を確認することができます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。【Swift】frameとboundsの違いは?UIViewにどう影響するのか【Swift】オプショナル型とは?4種類のアンラップ方法と共に解説!【Angular】html文書をエスケープしないでそのままtemplateに表示するアーカイブ2019年9月2019年5月2019年4月2019年3月2019年2月カテゴリーAngularAWSCSSDockerExcelJavaScriptMySQLPHPProgrammingPythonSwiftタイトルとURLをコピーしました。