SANGOでFontAwesomeの好きなアイコンをリストマーカーに指定する方法

SANGOにデフォルトで搭載されているFontAwesome(Ver4.7)の任意のアイコンをリストマーカーとした新しい箇条書きボックスを作成する方法を説明します。別バージョンのアイコンを使用する場合は、別途設定が必要ですが、ここではSANGOに最初から実装されているバージョン4.7をそのまま使用する方法の説明をしています。
搭載バージョンについてはSANGOカスタマイズ応用編に記載されたFontAwesomeに関する記事を参考に判断しています。
 

1 CSSに記述

設定は子テーマのstyle.cssに記入します。
 

style.css記載例

※「example」は例として使用している範囲名です。お好きな名前を付けて使用して下さい。
 

  • 「list-style: none;」
    デフォルトのアイコンを非表示にしています。
  • 「font-family: FontAwesome;」
    FontAwesomeの使用を明示しています。
  • 「content:“\f138”;」
    挿入するアイコンを指定しています。
    →アイコンを変更するには、この部分のUNIコードを変更します。

 

擬似要素

擬似要素「:before」でアイコンを文字列の直前に挿入しています。
この設定例では、擬似要素指定に「ul」を入れずに「li:before」としています。サルワカ様のHTML&CSSのリファレンスページでは「ul li:before」と記述されていましたが、このページの環境で試すとレイアウトが崩れてしまったために意図的に外しています。ご自身の環境に合わせて変えて下さい。

 

このコードを実行した場合は、SANGOショートコード「箇条書き:種類13」のシェブロンマークと同カラーのアイコンが入ります。種類13は囲い線(外枠)が設定されていますが、サンプルでは囲い線は無しに設定しています。囲い線(外枠の線)が必要な場合は、borderで指定して下さい。

【参考】「箇条書き:種類13」アイコンのUNIコード:\f138

  • 見本
  • 見本
  • 見本

 

2 アイコンの選択

好きなアイコンに入れ替えるには「content」の値欄のuniコードを変更します。FontAwesome公式サイトの一覧からアイコンを検索してuniコードを確認します。

アイコン一覧(FontAwesome公式サイト)

※サイトに行くとバージョン5へのアップデートのダイアログが出る場合がありますが無視して大丈夫です。
 
FontAwesome_web
 
入れ替えたいアイコンが決まりましたらクリックして詳細画面を開きます。
 
FontAwesome_web
赤丸の所に書かれているのがuniコードです。
contentの値の欄に\(バックスラッシュ)の後に続けて、アイコン詳細ページに書かれているuniコードを書き込んで下さい。

注意
値として書き込む「\(バックスラッシュ)」には気をつけて下さい。Windowsの¥マークではなく本当のバックスラッシュなので、使用環境にかかわらず「\」を書き込んで下さい。
 

3 完成

先程のコードの実行例です。アイコンを変更出来たら完了です。

  • サンプルです
  • 枠線なしです
  • マーカーはシェブロンマークです

 

ショートコードに登録しておけば記事への挿入も簡単です。
プラグイン「AddQuickTag」がおすすめです。

AddQuicktag公式サイト

 

完全なる余談ですが、CSSのソースコードを掲載するのにあたり、Wordpress上でpreタグを使用した場合、「\」が「¥」で表示されるという仕様のためにソースコードをそのまま載せられないという壁にぶつかりました。
そのため、ソースコードを埋め込むツールを使用するのに、以下のサイトの記事を参考にさせていただきました。
参考 WordPressでソースコードを表示するには「Gist」一択!プラグインでの埋め込みはもう古い!らいふーる

Gist公式サイト(GitHub)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です