HOME  /WordPress(応用)
 /サイトにアイコンフォントを使える様にする。
2020年03月24日

サイトにアイコンフォントを使える様にする。

このサイトではBootstrapアイコンとダッシュアイコンが使える様にしています。

使い方は下記になります。

1.Bootstrapアイコン文字の使い方

Bootstrapにどのようなアイコンがあるか?は下記URLを参照してください。

Bootstrapアイコン一覧

 

使い方は該当のアイコンをHTMLで記述するだけです。

<p><span class="glyphicon glyphicon-search" aria-hidden="true"></span></p>

上記は下図の虫眼鏡アイコンを表示した例で赤字の所がアイコン一覧から持ってきたものです。

aria-hidden=”true”は、文字読み上げでこれを読むな!を指定しているだけなので削除しても問題ありません。

­ ­メモ

Bootstrapアイコンを利用する為には下記の設定が必要です。

 ­ビジュアルエディタでBootstrap3を利用する為の設定と設定

 

2.WordPressのアイコン文字の使い方

WordPressのアイコンフォントはダッシュアイコンと呼ばれています。

どのようなアイコンがあるか?は下記URLを参照してください。

ダッシュアイコン一覧

 

ダッシュアイコンの使い方は2つあります

①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-familydashiconsを宣言し、content利用するダッシュアイコンのコードを入れます。
コードはアイコン一覧から探したアイコンの「Copy CSS」からコピーします。

 

3.ビジュアルエディタでダッシュアイコンを使える様にする

旧サイトでは「WordPress Visual Icon Fonts」プラグインを利用していましたが、決して使い易い物ではありませんでした。

詳細は下記URLを参照してください。

 WordPress Visual Icon Fontsのインストール方法と使い方

 

しかしビジュアルエディタで使いたいアイコンはそんなに多くありません。

そこで新サイトではプラグインを使わずにダッシュアイコンをダイレクトにビジュアルエディタで追加しました。

この方法は下記ドキュメントを参照してください。

  ビジュアルエディタ(TinyMCE)にアイコンボタンを追加する方法

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法を解す津指定ます。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。