最近はアイコンフォントを使ったサイトを多く見かけるようになりましたね。最初アイコンフォントの存在を知らなかったため、普通に画像を使ったサイトだと思っていたことはナイショにしておきます。ファッションの流行には乗れていない私ですが、WEBの流行には乗っかろうと目論み当ブログにもアイコンフォントを入れてみました。欲しいアイコンを選ぶ!まずはicomoonの下記のページで使いたいアイコンを選びます。Generatorこのページに欲しいアイコンがみつからなければもっと追加することが出来ます。Library...】をクリック。気になる絵柄があれば【Remove】をクリック。するとアイコンの追加画面に切り替わり、その種類の絵柄が追加されます。ATTENTIONほとんど無料ですがいくつか有料のも混ざっています。有料のを選ぶとアイコンセレクト画面ではなく『お金払ってね』的な画面に切り替わりますのですぐわかるかと思います。絵柄ごとにライセンスが異なります。Removeボタンすぐ上のライセンスで確認してください。英語の説明ですが、翻訳サイトを使うとなんとなく意味が分かります。上記のところにも欲しいアイコンが見つけられなかった場合、icomoonは自作のアイコンやフリーのSVGアイコンなどもWEBフォント化することが出来るのです。WEBフォント化にすることができるのはSVG形式の画像です。SVG形式の画像はIllustratorなどで作成することができますが、探せば無料で利用できるサイトもたくさんあります。Icons】からインポートさせます。するとアイコンのセレクト画面にインポートしたアイコンが追加されるのです。使いたいアイコンを選んだら【Font】をクリック。アイコンの名前はそのままclass名になります。自分の好きなように変更することも出来ますのでそこはお好みで。変更が終わったら【ダウンロード】をクリック。zipファイルがダウンロードされますので、解凍後ファイルを開き【fonts】というファイルをアイコンフォントを使いたいテーマのStyle.cssと同じ階層へFTPソフトでアップロードします。次にダウンロードしたicomoonのファイルの中のstyle.cssファイルを開きます。"\e602";}~以下略~これをそのままWordPressのテーマのstyle.cssにコピペします。コピペ後、相対パスを変更します。normal;}(‘./fonts/icomoon~のようにfontsのまえに【./】を追加してください。MEMOアイコンの数が多いようでしたらicomoonのstyle.cssも外部cssファイルとしても問題ありません。その際上記相対パスは変更の必要はありません。style.cssのファイル名の変更をお忘れなく!上書きされますよーicomoonの使い方アイコンフォントはフォントと同じ扱いなので、フォントのようにサイズや色など好きなように変えることが出来ます。自分の選んだフォントを確認したい場合は、icomoonのダウンロードしたファイルのなかに【demo】というファイルで確かめることが出来ます。アイコンフォントをHTMLで使うまずWordPressでいうと投稿や固定ページ等HTMLの画面で表示するやり方です。class="icon-に続く英単語"></span>これで簡単に表示することが出来ます。icon-に続く英単語英単語の部分は【demo】というファイルで確認できます。spanタグなのでそのままstyleを指定することもできます。style="color:#4dccf5"></span>フォントと同じなので拡大してもクッキリ見えます。投稿ページや固定ページ、phpファイルで使うときはこのように記載します。アイコンフォントをcssで使うcssとしてデザインに組み込むことも出来ます。見出しのデザインとして使ったり、リストの頭に付けたりといろいろ使い道はありそうですね。“\e60f”この部分の英数字はDEMOファイルにて確認し好きなアイコンの文字を入力。padding部分はデザインに合わせて調整してください。これはあくまでも例です。これをコピペするとサイトのaタグ全体にマークが付いてしまいます!classやidなど割り当ててやってみてくださいね。http://shufulife.com/まとめいろんなアイコンフォントを使えるサービスは出ていますが、icomoonは自分でオリジナルのフォントが簡単に作れるのでオリジナリティーを重視した方に向いていると思います。こちらでも使わせてもらっているテーマSTINGER5には「FontAwesome」があらかじめ搭載されていたので、重複しないよう気を付けてください。記事URLhttps://shufulife.com/icomoon/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。