snow_monkey_prepend_main

FontAwesome アイコンを設置するためのショートコードの作り方

  • ブックマーク
  • -
    コピー
snow_monkey_before_entry_content
snow_monkey_prepend_entry_content

こちらの配信イベント記事はこちら)の中で、ボタンの中にFont Awesome アイコンが設置されているものを見ていた際に「これはショートコードですねー」という話になったので、実際に試してみました。

事前確認

【外観】→【カスタマイズ】→【ページ速度最適化】より「軽量な FontAwesome を使用する」にチェックが入っている場合、利用できないアイコンがありますのでご注意ください。

こちらの設定に関する詳しい情報は、公式ドキュメントより確認してください。

ソースコード

<?php
/**
 * FontAwesome ショートコード
 */
function hsm_add_fontawesome_icon( $atts ) {
	extract( shortcode_atts( array(
			'icon' => 'fab fa-wordpress',
	), $atts ) );
	$output = '<i class="' . $icon . '"></i>';
	return $output;
}
add_shortcode( 'hsm-fa', 'hsm_add_fontawesome_icon' );

使い方

単純にショートコードのiconという属性の中に、必要なCSSクラス名を入力する形にしています。

設置するアイコンを探す際には、こちらのページから探しましょう。

例えば「youtube」と検索すると、このような結果になります。

表示したいアイコンをクリックして、そのアイコンページに表示されている<i>タグのCSSクラス名を覚えておきましょう。

そして、表示したい場所に以下のようにショートコードを設置します。

[hsm-fa icon="fab fa-youtube"]

こうすることでFont Awesomeアイコンを手軽に挿入することができます。

ボタンブロックの中にも、

と入力することで、

というように表示することができるようになります。

ぜひご自身でも試してみてください。

Snow Monkeyで困ったら…?

こんな時にご活用ください。
  • Snow Monkeyの使い方をレクチャーしてほしい
  • Snow Monkeyのカスタマイズの基本をレクチャーしてほしい
  • Snow Monkeyを採用した案件で行き詰まったので解決してほしい
  • Snow Monkeyを採用した制作案件を依頼したい

運営へのご連絡はこちらから

HAPPY SNOW MONKEY を
さまざまな形でサポート頂けます。

snow_monkey_append_entry_content
snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

Web制作系フリーランス。WordPressに関するお仕事や活動が多いです。

WordPressコア貢献者/テーマ開発者/プラグイン開発者/Meetupオーガナイザー/翻訳貢献者

snow_monkey_append_main