この記事では、Studioで利用できるアイコンの種類と、アイコンの追加・変更・デザイン調整の方法を説明します。Font AwesomeとMaterial Symbolsの違いや、調整できる項目についても整理します。
アイコンボックスとは
ページ上にアイコンを配置する際は、アイコンボックスを使用します。
Studioでは、Font AwesomeとMaterial Symbolsの2種類のアイコンを利用できます。
それぞれ以下のデザイン調整が可能です。
調整内容 | Font Awesome | Material Symbols |
表示サイズ | ○ | ○ |
カラー（色） | ○ | ○ |
線の太さ | × | ○ |
線のスタイル | × | ○ |
塗り | × | ○ |
アイコンボックスを追加する
画面左のナビゲーションメニューで追加アイコン
を選択します。追加パネル内の[基本]タブから[Icon]をクリックします。
デフォルトでハートのアイコン
がスクリーン上に追加されます。
アイコンを変更する
スクリーン上で対象のアイコンを選択します。
アイコンを選択した状態でEnterキーを押下、またはダブルクリックします。
左パネルにアイコン設定パネルが表示されます。
アイコンを選びます。
パネル上部の検索ボックスでキーワード検索が可能です。（英語のみ対応）
Font AwesomeとMaterial Symbolsはパネル上部のタブで切り替えができます。
変更したいアイコンを選ぶと、スクリーン上のアイコンが置き換わります。
アイコンのデザイン調整をする
デザイン調整の手順
対象のアイコンを選択して、右パネルを開きます。
右パネルで[アイコン]タブを選択し、以下の各項目を設定します。
カラー
アイコンの色と不透明度を設定します。
HEXコードによる色指定と不透明度の設定ができます。
色見本アイコンをクリックするとカラーパレットが表示され、詳細な設定ができます。
サイズ
表示サイズを数値で設定します。単位はpx（ピクセル）です。
太さ
※Material Symbolsのみ
アイコンの線の太さを設定します。スライダーを動かして太さを調整します。
スタイル
※Material Symbolsのみ
アイコンの線のスタイルを設定をします。
アウトライン・ラウンド・シャープのいずれかを選択します。
塗り
※Material Symbolsのみ
アイコンの塗りの有無を設定します。