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

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

snow_monkey_before_entry_content

snow_monkey_prepend_entry_content

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

ソースコード

<?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_append_entry_content

snow_monkey_after_entry_content

HAPPY SNOW MONKEYの管理人情報

久野 晃司

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

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