ヘッダーロゴ

fontawesomeのアイコンを簡単に記事中に挿入する方法

記事中にアイコンを表示させよう!

「Better Font Awesome」を有効化するとTinyMCE Advanceのメニュー上に、赤枠で囲った「Insert Icon」(アイコン挿入)ボタンが表示されます。

この「Insert Icon」をクリックすると、下にアイコンの一覧が表示されます。

挿入したいアイコンを選択し、クリックしてみましょう。今回は自転車?のアイコンを選んでみました。

すると記事中にショートコードが挿入されます。

アヒルン
このままショートコードが表示されちゃわないの?
うちゅうじん
ではプレビューを見てみよう

早速挿入されたショートコードをプレビューで見てみると...

無事に自転車のアイコンが表示されていますね!

アヒルン
ビジュアルモードではショートコードでもきちんとアイコンで表示されるんだね!

アイコンを並べて表示してみる

次にショートコードを並べてみました。プレビューで見てみると...

それぞれが独立してアイコンが表示されてますね!

アヒルン
なかなか良い感じだね!
うちゅうじん
これを100種くらい自在に使えるのはとても便利だな

メニューから「ワンクリック」でアイコンが表示できるってほんと素晴らしいです。

 

記事へのリンクの際、コチラ みたいに使うと便利ですね。

【高速化】WordPressが重い!プラグインを見直すだけで表示速度が4倍に?

fontawesomeのアイコンを簡単に記事中に挿入・まとめ!

Better Font Awesome」プラグインを使ったアイコン挿入は上手く出来ましたか?

  • Better Font Awesomeをインストール
  • Tiny MCE Advanceをインストール
  • 好きなアイコン選んで記事中に挿入!

このプラグインを使うことでWordPressのテーマに頼らず、記事の中に様々なアイコンを自由自在に挿入することが出来ますね。

 

リンクアイコンを挿入したり、ビックリマークを使ったり用途は様々。

 

またプラグイン自体の容量が軽めに設計されているため、そこまでサイトの読み込みを遅くなりません。他プラグ・インとも干渉させないように工夫されています。

oyakun
サイトの表示速度に悪影響がなく、気軽に導入出来るプラグインです。このサイトではメニューバーにfontawesomeアイコンを設置しています。

関連記事: WordPress・内部リンク専用プラグインShow Article Mapがスゴイ
関連記事: WordPressにテーブルをプラグインで作成するならInline Google Spreadsheet Viewer一択!
関連記事: WordPressでアイキャッチが設定できない原因は表示オプションのチェック漏れ

  • この記事を書いた人
  • 最新記事

OYAKUN

30代半ば♂妻・子3人の5人で日々激戦中。Google app script&VBA初心者が自分の備忘録を兼ねて「スプレッドシート、Excel、WordPress、plugin」の設定等、主にブログやアフィリエイト周辺のtipsを背伸びしながらご紹介しています。

© 2022 OYAKUDACHI.XYZ