このサイトではBootstrapアイコンとダッシュアイコンが使える様にしています。
使い方は下記になります。
1.Bootstrapアイコン文字の使い方
1-1.Bootstrapアイコンを使う為の設定
Bootstrapアイコンを利用する為には下記の設定が必要です。
ビジュアルエディタでBootstrap3を利用する為の設定と設定
1-2.Bootstrapアイコンの使い方
Bootstrapにどのようなアイコンがあるか？は下記URLを参照してください。
使い方は該当のアイコンをHTMLで記述するだけです。
<p> <span class="dashicons dashicons-search"> </span> </p>
上記は下図の虫眼鏡アイコンを表示した例で赤字の所がアイコン一覧から持ってきたものです。
2.WordPressのアイコン文字の使い方
WordPressのアイコンフォントはダッシュアイコンと呼ばれています。
2-1.ダッシュアイコンを使える様にする設定
functions.phpに下記設定を追加します。
//WordPressのdashiconsの利用宣言 function load_dashicons() {wp_enqueue_style('dashicons');} add_action('wp_enqueue_scripts', 'load_dashicons');
上記の設定がなくてもWordPressの管理者モードではダッシュアイコンが使えます。
しかし一般ユーザがアクセスした時にダッシュアイコンが表示されないので必ず設定して下さい。
2-2.ダッシュアイコンの使い方
どのようなアイコンがあるか？は下記URLを参照してください。
ダッシュアイコンの使い方は２つあります
①HTMLで利用する場合
利用方法はBootstrapアイコンと同様です。
<p><span class="dashicons dashicons-edit"></span>メモ</p>
上記は下図の鉛筆アイコンを表示した例で赤字の所がアイコン一覧の「Copy HTML」から持ってきたものです。
②CSSで利用する場合
ダッシュアイコンはCSSでも利用できます。
blockquote:before{
font-family:"dashicons";
content:"\f122";
font-size:20px;font-size:1.25rem;
line-height:1em;
color:#999;
position:absolute;left:0;top:0;}
上記は参照にダッシュアイコン
を使った例です。
font-familyでdashiconsを宣言し、contentで利用するダッシュアイコンのコードを入れます。
コードはアイコン一覧から探したアイコンの「Copy CSS」からコピーします。
3.ビジュアルエディタでダッシュアイコンを使える様にする
旧サイトでは「WordPress Visual Icon Fonts」プラグインを利用していましたが、決して使い易い物ではありませんでした。
詳細は下記URLを参照してください。
WordPress Visual Icon Fontsのインストール方法と使い方
しかしビジュアルエディタで使いたいアイコンはそんなに多くありません。
そこで新サイトではプラグインを使わずにダッシュアイコンをダイレクトにビジュアルエディタで追加しました。
この方法は下記ドキュメントを参照してください。
