Font Awesomeで見つけた!今すぐ使えるかわいいアイコンフォントまとめ

アフィリエイトブログ, 収入を増やすLuxeritas

「なにか新しいことに挑戦したい」と思って、最近Font Awesomeを使い始めました。

Font Awesomeを使うとアイコンフォントが絵文字のように使えて、ブログのデザインや記事が一気に華やかになりました。

多用すると逆に見にくくなってしまうのですが、難しい内容の記事でも「読んでみよう」と思ってもらえるかもしれないと思って使っています

私はワードプレスでブログを運営していて、無料テーマのLuxeritasを利用しています。SEO最適化はもちろん、高速表示・高カスタマイズで人気のテーマです。

Luxeritasでは初期状態からFont Awesomeが使えるようになっています。そのためFont Awesomeの利用字体は簡単だったのですが、Font Awesomeはアイコンフォントがありすぎる&英語表記のため英語が苦手なわたしは使いたいフォントにたどり着けなくてすごく困りました。

今回はわたしのように困っている人がいるかもしれないと思って、今すぐ使えるかわいいアイコンフォントをまとめました。

ブログの記事やデザインをかわいくしたい

かわいいアイコンフォントを使いたい

アイコンフォントを探している

このような方はぜひ読んでみてください

Luxeritas以外のテーマを使っているorFont Awesomeが標準設定されていない方は、こちらの記事を参考にしてみてください

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

アイコンフォントの使い方

Font Awesomeの公式サイトから、使いたいアイコンフォントを探します。無料のアイコンフォントと有料アイコンフォントがありますが、無料アイコンフォントでもたくさんの種類があります。

使いたいアイコンフォントが決まれば、ページ上部でコードをコピーして、表示したい場所に貼り付けます。これで完成です

詳しい方法はこちらの記事を参考にしてみてください

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

使いたいアイコンフォントさえ決まっていれば、すごく簡単に利用できます。ただ、アイコンフォントが多すぎて使いたいものが見つからないんです…。しかも英語表記なので、探すのも一苦労です。

同じような状態の人や同じ状況になりたくない人は、わたしが使っているアイコンフォントを参考にしてみてください

今すぐ使えるかわいいアイコンフォント

コードをコピペすると使うことができます。見やすいように大きめのアイコンフォントにしていますが、コードをコピペすると文中で使える大きさになるので安心してください

color部分を変更することで、色の変更もできます。

<i class=”fas fa-splotch” style=”color:yellow;”></i>

<i class=”far fa-star” style=”color:yellow;” ></i>

<i class=”fas fa-star” style=”color:yellow;”></i>

ハート

<i class=”fas fa-heart” style=”color:red;”></i>

ビックリマーク

<i class=”fa fa-exclamation” style=”color:pink;”></i>

クエスチョンマーク

<i class=”fa fa-question” style=”color:pink;”></i>

かみなり

<i class=”fas fa-bolt” style=”color:yellow;”></i>

いいね

<i class=”fas fa-thumbs-up” style=”color:pink;” ></i>

<i class=”fas fa-tint” style=”color:blue;”></i>

どくろ

<i class=”fas fa-skull”></i>

双葉

<i class=”fas fa-seedling” style=”color:green;” ></i>

音符

<i class=”fas fa-music” style=”color:pink;”></i>

電球

<i class=”far fa-lightbulb” style=”color:orange;”></i>

危険

<i class=”fa fa-exclamation-triangle” style=”color:red;” ></i>

チェックマーク

<i class=”fas fa-check-circle” style=”color:pink;”></i>

再生

<i class=”fa fa-play-circle” style=”color:pink;”></i>

矢印

<i class=”fa fa-arrow-down” style=”color:pink;”></i>

<i class=”fas fa-arrow-circle-right” style=”color:pink;”></i>

<i class=”far fa-hand-point-right”style=”color:pink;” ></i>

<i class=”far fa-hand-point-down” style=”color:pink;”></i>

メモ

<i class=”fas fa-edit” style=”color:pink;”></i>

ホーム

<i class=”fa fa-home” style=”color:pink;”></i>

虫眼鏡

<i class=”fa fa-search” style=”color:pink;”></i>

フォルダー

<i class=”fa fa-folder” style=”color:pink;”></i>

タグ

<i class=”fa fa-tag” style=”color:pink;”></i>

リンク

<i class=”fas fa-link” style=”color:pink;”></i>

まとめ

他にもかわいいアイコンフォントがあると思いますが、わたしが使っているアイコンフォントは以上です。またかわいいものが見つかれば、追記していく予定です。

記事は参考になったでしょうか?最後までご覧いただき、ありがとうございました

ブログに関する記事一覧

【比較検証】WordPressとはてなブログ、始めるならどっち?アクセス数と検索順位を比べてみた

【比較検証】ワードプレスの人気無料テーマ!LuxeritasとCocoon使うならどっち?SEO・デザイン性などを比べてみた

【初心者向け】ブログが一気におしゃれになる!Luxeritas(ルクセリタス)デザイン・カスタマイズ方法まとめ