WordPressサイトにアイコンフォントを追加したいですか？
アイコンフォントはリサイズ可能で、ウェブフォントと同じように読み込まれるため、サイトの表示速度が遅くなることはありません。また、CSSを使用することで、思い通りのスタイルに仕上げることも可能です。
この投稿では、WordPressテーマにアイコンフォントを簡単に追加する方法をご紹介します。
アイコンフォントとは？
アイコンフォントには、文字や数字の代わりに記号や小さな絵が含まれています。
これらのアイコンフォントは様々な方法で使用することができます。例えば、お買い物カゴ、ダウンロードボタン、フィーチャーボックス、プレゼントコンテスト、WordPressのナビゲーションメニューなどにも使用できます。
実際、WordPressは管理エリアでフォントアイコンを使っている。
ほとんどの訪問者は、よく使われるアイコンの意味をすぐに理解できるので、サイトをナビゲーションしやすくすることができます。また、アイコンは多言語サイトの構築にも役立ちます。
画像ベースのアイコンに比べ、フォントアイコンは読み込みが非常に速いため、WordPressのスピードとパフォーマンスを向上させることができます。
無料で使えるオープンソースのアイコンフォントセットはいくつかあるが、このガイドでは、最も人気のあるオープンソースのアイコンセットであるFont Awesomeを使うことにする。
それでは、WordPressテーマにアイコンフォントを簡単に追加する方法を見ていきましょう。クイックリンクを使えば、使いたい方法にすぐにジャンプできます：
方法1.WordPressプラグインを使ってアイコンフォントを追加する（簡単）
WordPressにカスタマイザーフォントを追加する最も簡単な方法は、Font Awesomeプラグインを使用することです。
このプラグインを使えば、WordPressのテーマファイルを変更することなく、ページや投稿でフリーのアイコンフォントを使うことができます。また、プラグインを更新するたびに、新しいFont Awesomeアイコンが自動的に追加されます。
まず最初にWordPressにFont Awesomeを追加します。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
有効化した後、任意のショートコードブロックにFont Awesomeアイコンを追加できます。アイコンのフォントを表示したいページや投稿日を開き、「+」アイコンをクリックするだけです。
ショートコード」を検索し、適切なブロックが表示されたら選択することができる。
これで、以下のショートコードを使って、任意のFont Awesomeアイコンを追加できる：
[icon name="rocket"]
rocket」を表示したいアイコンの名前に置き換えるだけです。名前を取得するには、Font Awesomeライブラリにアクセスして、使用したいアイコンをクリックします。
外観のポップアップで、アイコンの名前をクリックする。
Font Awesomeは自動的にクリップボードに名前をコピーします。
これで、ショートコードに名前を貼り付けるだけです。これで「公開する」または「更新する」をクリックして、アイコンフォントをライブにすることができる。
テキストブロックの中にアイコンフォントを表示したい場合があります。例えば、ブランド名の後に「コピーライト」シンボルを表示したい場合などです。
これを行うには、単に任意の段落ブロック内にショートコードを貼り付けます。
テキストブロックのオプションをカスタマイズする方法と同じように、右側のメニューの設定を使用してアイコンをカスタマイズすることができます。例えば、WordPressでは フォントサイズや 背景色を変更することができます。
WordPressはショートコードをFont Awesomeアイコンに変換し、テキストと一緒に表示します。
もう一つのオプションは、ウィジェット対応エリアにショートコードを追加することです。
例えば、サイトのサイドバーなどにショートコードのブロックを追加することができます。
詳しくは、WordPressサイドバーウィジェットでショートコードを使用する方法をご覧ください。
カラムにアイコン・ショートコードを追加して、美しいフィーチャー・ボックスを作ることもできる。
詳しい手順は、WordPressでアイコン付きの機能ボックスを追加する方法をご覧ください。
多くのサイトでは、メニューにアイコンフォントを使用することで、訪問者が道順を見つけやすくしています。アイコンを追加するには、新規メニューを作成するか、WordPressダッシュボードで既存のメニューを開きます。
ステップバイステップの手順については、WordPressでナビゲーションメニューを追加する方法についての初心者ガイドをご覧ください。
外観“ メニュー ‘のページで’表示オプション’をクリックし、’CSSクラス’の隣のボックスにチェックを入れる。
そうしたら、アイコンを表示したいメニュー項目をクリックして展開するだけです。
新しい「CSS Classes」フィールドが表示されるはずです。
アイコンのCSSクラスを取得するには、Font Awesomeのサイトでアイコンのフォントを見つけてクリックするだけです。必要であれば、さまざまな設定をクリックしてアイコンのスタイルを変更できます。
ポップアップには、HTMLコードの断片が表示されます。CSSクラスは単に引用符で囲まれたテキストです。例えば、以下の画像では、CSSクラスはfa-solid fa-address-bookです。
引用符の中のテキストをコピーし、WordPressダッシュボードに戻るだけです。
CSS Classes」フィールドにテキストを貼り付けることができます。
さらにアイコンフォントを追加するには、上記と同じ手順を踏むだけです。
メニューの設定に満足したら、「保存」をクリックする。これで、WordPressのサイトにアクセスすると、更新されたナビゲーションメニューが表示されます。
方法2.SeedProdでアイコンフォントを使う（よりカスタマイズ可能）
サイト上のどこにでも自由にフォントアイコンを使いたい場合は、ページビルダープラグインの使用をお勧めします。
SeedProdは、市場で最高のドラッグアンドドロップWordPressページビルダーであり、1400以上のFont Awesomeアイコンがビルトインされています。また、ドラッグ＆ドロップでどのページにも追加できる既製のアイコンブロックもあります。
SeedProdでは、ご希望のサイトデザインに合ったカスタムWordPressテーマを作成することもできます。
最初に行う必要があるのは、プラグインのインストールと有効化です。詳しくは、初心者向けWordPressプラグインのインストール方法をご覧ください。
注： SeedProdには無料版もありますが、今回はアイコンブロックが付属しているPro版を使用します。
有効化した後、SeedProd ” Settingsに進み、ライセンスキーを入力してください。
この情報は、SeedProdサイトのアカウントで確認できます。ライセンスキーを入力した後、「Verify Key」ボタンをクリックしてください。
次に、SeedProd ” ページにアクセスし、「新規ランディングページを追加」ボタンをクリックする必要があります。
ここで、あなたのページのベースとして使用するテンプレートを選択することができます。SeedProdは、あなたのWordPressブログやサイトのニーズに応じてカスタマイズすることができ、300以上の専門的に設計されたテンプレートを持っています。
テンプレートを選択するには、マウスオーバーして「チェックマーク」アイコンをクリックします。
デジタル商品の販売に最適なので、画像にはすべて「Ebook Sales Page」テンプレートを使用しています。しかし、お好きなデザインをお使いいただけます。
次に、カスタムページの名前を入力します。SeedProdはページのタイトルに基づいて自動的にURLを作成しますが、このURLは好きなものに変更することができます。
入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。
次に、SeedProdドラッグアンドドロップページビルダーに移動し、テンプレートをカスタマイズすることができます。
SeedProdエディターには、右側にデザインのライブプレビュー、左側にいくつかのブロック設定が表示されます。
左側のメニューには、デザインにドラッグできるブロックもあります。
ボタンや画像などの標準ブロックをドラッグ＆ドロップしたり、お問い合わせフォーム、カウントダウン、ソーシャルメディア共有ボタンなどの高度なブロックを使用することができます。
ブロックをカスタマイズするには、レイアウト内でクリックして選択するだけです。
左側のメニューには、そのブロックをカスタマイズするために使用できるすべての設定が表示されます。例えば、背景色を変更したり、背景画像を追加したり、配色やフォントを変更してあなたのブランドに一致させることができます。
ページにアイコンフォントを追加するには、左側の列で「Icon」ブロックを見つけ、レイアウト上にドラッグするだけです。
SeedProdは初期設定で「矢印」アイコンを表示します。
別のFont Awesomeアイコンを表示するには、単にクリックしてアイコンブロックを選択します。
左側のメニューで、アイコンの上にマウスオーバーし、表示されたら「アイコン・ライブラリ」ボタンをクリックします。
Font Awesomeのアイコンがすべて表示されます。
使いたいフォントのアイコンを見つけてクリックするだけ。
SeedProdはアイコンをレイアウトに追加します。
アイコンを選択した後、左側のメニューにある設定を使用して、アイコンの配置、色、サイズを変更できます。
左メニューの「リンク」フィールドに入力して、フォントアイコンへのリンクを追加することもできます。
もう一つのオプションは、SeedProdの既製のアイコンボックスを使用することです。
テキストを入力すると、その横にフォントアイコンが表示される。
左側のメニューからアイコンボックスを見つけ、レイアウト上にドラッグするだけです。
その後、クリックしてブロックを選択し、上記と同じ手順でアイコンを変更することができます。
その後、ヘッダーと本文を入力する。
また、「詳細」タブを選択すれば、ブロックの間隔やテキストの色を変更したり、CSSアニメーションを追加したりすることもできる。
さらにブロックを追加し、左側のメニューでそれらのブロックをカスタマイザーすることで、ページでの作業を続けることができます。
ページの見た目に満足したら、「保存」ボタンをクリックします。その後、「公開する」を選択すると、そのページを公開することができます。
代替案SVGアイコンを使う
WordPressにアイコン画像を追加するもう一つの方法は、SVGアイコンを使うことだ。スケーラブル・ベクター・フォーマット（Scalable Vector Format）の略で、ベクター・グラフィックスによく使われる画像フォーマットだ。
アイコンに複数の色を追加したい場合、多くの人がアイコンフォントよりもSVGベクターアイコンを使用します。また、SVGベクトルアイコンはSEO対策にも必要で、他のイメージアイコンよりもサーバーからの読み込み要求が少なくて済みます。
SVGについてさらに詳しく知りたい方は、WordPressでSVG画像ファイルを追加する方法をステップバイステップでご紹介しています。
このチュートリアルでWordPressテーマにアイコンフォントを追加する方法を学んでいただけたら幸いです。また、最高のポップアッププラグインの比較や 、最高のウェブデザインソフトウェアの選び方についてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Shraddha Patil says
Very Helpful! I was searching for such solutions. Glad I found it here. Thank you!!
WPBeginner Support says
Glad our guide was helpful
管理者
Juan says
Hi there, many thanks for suych a great explanation.
But I don´t understand something.
On the wp_enqueue_style() function, the first parameter is a string called ‘wpb-fa’. I looked on the documentation and it is supposed to be the name of the stylesheet. But I don´t understand. What is this name for? Is mandatory to be named that way in this case? The stylesheet isn´t named “style.css”?
Sorry for the noob questions.
Thanks
WPBeginner Support says
The wpb-fa is the unique name for the script, that section is not for the name of the stylesheet
管理者
M. Hridoy says
Hi,
This is Great! Thanks for your awesome resourceful worth reading post.Indeed a timely and useful post which I could pick up some valuable information on this subject. Keep updating new suggestions with us…
WPBeginner Support says
Thank you and you’re welcome
管理者
drkumar kumar says
nice article , thanks for sharing
WPBeginner Support says
Thank you, glad you liked our article
管理者
Niranjan G Vala says
Hello wp beginners support team, I am visually impaired web designer.
Have read this whole artical but still want some help regarding integrating the font icons in my website.
I want to use Font Awesome with my theme. and already followed the steps provided above in artical.
The icons are working in post and pages vary fine but i want to use it in menus.
Here what I have done with css.
.shoppingcart::before {
font-family: FontAwesome;
content: “\f07a”;
color: #ffffff;
}
But still it didn’t worked. Then what I have done wrong?
Please assist me out of this problem.
I will always appreciate.
Vary Thank you all at wp beginners.
WPBeginner Support says
Hi Niranjan,
An easier way to add Font Awesome is to add its CSS classes to invidual menu items. After enqueuing font stylesheet.
Go to Appearance » Menus page and click on Screen Options button. From there make sure that CSS Classes check box is checked.
Next click to expand an individual menu item and you will notice the option to add CSS classes. Each font-awesome icon has its own CSS class for exmaple, fa fa-lg fa-home CSS classes will be used for home icon. You can find them all on Font Awesome website.
After adding CSS class you can use those classes in your custom CSS to style the icons.
管理者
Niranjan G Vala says
First thanks to all at WP Beginners for your valuable response. And sorry for late feedback. Unfortunately I was not able to reply quickly because the mail was in the spam folder. Now it works fine and i’m able to use font awesome in navigation menus.
One suggestion is that please mention the accessibility level of plugins/themes when you post an artical. WordPress core is fully accessible but 60% of plugins and themes are not following the web accessibility guidelines (WCAG 2.0) witch is the recommendation of world wide web consortium (w3.org). Or please add skip links on your website for better accessibility. Making websites accessible will help lot to persons with disabilities like myself to navigate the website lot easier. Thanks.
ripon says
in a website there should have font awesome icon. I want to make that dynamic. I want to change that icon from wordpress control panel. like why choose us section there should have responsive design font icon. I want to change that from wordpress theme option.
Tobias says
Hi, awesome tutorial, thank you!
Can you help me?
I used this line of the code “-o-transform: scale(1);” to scale my icons in Opera properly, however it didn’t help me. Maybe it is because of specifically these icons, that I am using –
Is it possible that something is wrong with them? What do you think? And thanks for your tutorial!
valldahi says
Thank you very much Isy. methode 1
Nrusingh Pr Acharya says
Thanks for this method. I inserted FA manually because better is not in support anymore with WP v4.7.
I am following your tutorials from first, and I’m pretty much confident in WordPress now. Thanks.
zeniwo says
A very informative article , it really helped me in clearing my doubts about adding icon fonts in wordpress themes . Bloggers like you help hundreds of new and budding bloggers like me to understand things and move ahead . Thank you very much for this useful article.
WPBeginner Support says
Glad you found it helpful
管理者
Rhonda says
Thank you! I’ve been trying to understand how to use the font icons and this was straight forward and helpful.
WPBeginner Support says
Glad you found it helpful
管理者
Kobe says
Thanks for this post. It was really useful. I’ve been using Better Fonts Awesome plugin and it helped me much. But then I needed to form my content into responsive columns and I started to search for plugin that will allow me to do that. Accidentally I came across MotoPress Editor. Actually I do not like visual editors due to dependency on them but it saved me as I could form the columns visually and use Font Awesome Icons, selecting sizes and colors easily. Thank you again for good job.