カスタマイズ方法について
アイコンのカスタマイズ方法としては、CSSコードを使って全体を変更するか、HTMLコードを使って部分的に変更するかの2種類になります。
・CSSコードで全体を変更する。
・HTMLコードで部分的に変更する。
値に関しては参考で「#000000」「10px」としていますが、カスタマイズしたい内容に合わせて変更して下さい！！
アイコン色の変更
全体のカスタマイズ
.アイコンクラス名 {
color: #000000;
}
STEP①
上記追加CSSのセレクタ部分「.アイコンクラス名」にカスタマイズしたいアイコンのクラス名を入力します。
※CSSコードの場合はクラス名の前に「.」ドットを付ける必要があるよ！！STEP②
「{}」の中にカスタマイズしたい内容のプロパティと値を入力します。ここでは色をカスタマイズするので「color: #000000;」になります。
STEP③
色に関するプロパティ値は基本的には「#RRGGBB形式」もしくは「色の名前」で指定します。
部分的なカスタマイズ
<span class=”クラス名” style=”color: #000000;”></span>
HTML要素は「p」「div」「span」の3種類がありますが、カスタマイズで使用するのは改行無の「span」を使用するのがオススメです。
STEP①
上記HTMLの「クラス名」部分にカスタマイズしたいアイコンのクラス名を入力します。
STEP②
カスタマイズしたい内容を「style」要素を使用して入力します。ここでは色をカスタマイズするので「style=”color: #000000;”」になります。
STEP③
色に関する値はCSSコードと同様に「#RRGGBB形式」もしくは「色の名前」で指定します。
アイコンサイズの変更
全体のカスタマイズ
.アイコンクラス名 {
font-size: 10px;
}
STEP①
上記追加CSSのセレクタ部分「.アイコンクラス名」にカスタマイズしたいアイコンのクラス名を入力します。
※CSSコードの場合はクラス名の前に「.」ドットを付ける必要があるよ！！STEP②
「{}」の中にカスタマイズしたい内容のプロパティと値を入力します。ここではサイズをカスタマイズするので「font-size: 10px;」になります。
STEP③
サイズに関するプロパティ値は基本的には絶対値で指定する「px」、相対値で指定する「em」を使用します。ちなみに「em」は「％」と同じで「1em=100%」です。
部分的なカスタマイズ
<span class=”クラス名” style=”font-size: 10px;”></span>
STEP①
上記HTMLの「クラス名」部分にカスタマイズしたいアイコンのクラス名を入力します。
STEP②
カスタマイズしたい内容を「style」要素を使用して入力します。ここではサイズをカスタマイズするので「style=”font-size: 10px;”」になります。
STEP③
サイズに関する値はCSSコードと同様に「px」もしくは「em」で指定します。
一括でカスタマイズ
全体のカスタマイズ
.アイコンクラス名 {
color: #000000;
font-size: 10px;
}
「{}」の中にカスタマイズしたい内容のプロパティと値をまとめて入力します。
色とサイズを一括して指定する場合は「color: #000000;」「font-size: 10px;」になります。
部分的なカスタマイズ
<span class=”クラス名” style=”color: #000000;font-size: 10px;”></span>
カスタマイズしたい内容を「style」要素を使用してまとめて入力します。
色とサイズを一括して指定する場合は「style=”color: #000000;font-size: 10px;”」になります。
参考
参考・・・アイコンクラス名「icon-notification」文字の色は「#ff6347」「#008080」「#1e90ff」の３色、文字サイズ「30px」でカスタマイズしてみたらこんな感じになったよ！！