Awesome」を利用しようとしている人もいると思います。Awesomeを使う方法と、様々な使い方を紹介します。回転するエフェクト表示するとき角度をつけるアイコンを重ねて表示するまとめSimplicity2でFontAwesomeを使う方法FontAwesomeを使うために何か新しくインストールするのか、と思う方もいるかもしれませんが、実はSimplicity2はすでにFontAwesomeが使える状態にあります。デフォルトでなどが使われているので元々使える状態なのですね。使えるのはFontAwesome4.7.0のものであることに注意してください。使い方を見ていきましょう。以下のリンクがFontAwesomeのリンクになります。frameworkfontawesome.comこの中から使いたいアイコンを選びます。使いたいアイコンをクリックして以下の画面を開きます。aria-hidden="true"></i>をコピーします。コピーしたものをWordpressのHTMLのテキスト表示の中にペーストすればと表示されます。できましたでしょうか?次は具体的なFontAwesomeの使い方を紹介したいと思います。上記方法でFontAwesomeを使えるようになったと思います。続いてはそれら表示したいものに様々なエフェクト要素を追加する方法を紹介します。左右の余白調整まず、一番よく使うのがアイコンの左右の余白合わせです。文字列の中にアイコンをそのまま入れると少し余白がないために見づらくなってしまいます。【例】左右の余白がないために、このペンは詰まって見えます。そこでfa-fwというclassを加えます。aria-hidden="true"></i>とします。することで【例】左右の余白があり、このペンは詰まって見えません。上の例よりも左右に余白が入り、見やすくなりました。このfa-fwというclassは種類に関係なく、使用することができます。アイコンのサイズ調整アイコンのサイズを大きくするには次のclassをfa-fwと同様に加えます。fa-5x具体的には以下のようにします。fa-5x【表示例】fa-lgfa-2xfa-3xfa-4xfa-5xこれでサイズの変更は可能です。普段、文中に入れる際はまわりのフォントサイズに合わせてくれるのであまり気にしなくてもいいかもしれません。回転するエフェクトFontAwesomeのアイコンはのように回転させることが可能です。具体的な方法は、fa-spinというclassを加えます。これを加えることで滑らかに回転してくれます。一つfa-pulseというclassもあります。こちらは8段階で回転します。読み込み中などによく用いられていますよね。表示するとき角度をつける90度回転させたりして、表示する方法はfa-rotate-◯を使います。上下反転にはfa-flip-vertical、左右反転にはfa-flip-horizontalというclassを追加します。アイコンを重ねて表示する2つのアイコンを重ねることもできます。親classとしてfa-stackを作成します。次にfa-stack-2xというclassを加えるものが外側の大きなアイコン、fa-stack-1xと加えるのが内側の小さいアイコンです。外側のアイコンの色と内側のアイコンの色がかぶるときはfa-inverseを加えることで色反転をすることができます。fa-stack-2x"></i></span>fa-banをfa-cameraの内側に【表示例】fa-twitterをfa-square-oの内側にfa-flagの色反転をfa-circleの内側にfa-terminalの色反転をfa-squareの内側にfa-banをfa-cameraの内側にまとめいかがでしたでしょうか。FontAwesomeを使うだけで文字や画像だけのページよりも少し華やかになりますね。今回取り扱ったものは新しいFontAwesomeではないので、新しいものについてはまた扱いたいと思います。スポンサーリンクレクタングル大広告レクタングル大広告シェアするフォローする関連記事コピペで簡単!Simplicityでも使えるシンプルな見出しデザインでカスタマイズしよう!見出し部分のカスタマイズ方法を紹介します。初心者の方でもわかりやすいよう詳しく解説しています。SimplicityなどのWordPressテーマを使っている方はぜひ利用してみてください。Chromeを使っていてCSSが反映されない時の対処法を紹介します。\LaTeX$のような数式を表示させる方法を紹介します。World”プログラミング言語はたくさんあって、どれが何に向いているかは気になるところですよね。Pythonの7つを比較してみたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイトPROFILE当サイト管理人は基本的に機械チックなものが好きです。見やすく、分かりやすい情報提供を目指しています。