【SWELL】サイトにアイコンをCSSで追加する際のコード一覧「カスタマイズ」

SWELLで使えるアイコンをCSSで扱いたい!というときに便利なコード表を作成しました。

目次

アイコンの種類一覧

SWELLで使用可能なアイコンのCSSコードを記載しました。

企業ロゴ

機能アイコン

上記のアイコンは大きくしたり、色を変えたりすることが可能です。

アイコンの拡大

アイコンは、CSSにタグを追記することで、拡大・縮小が可能です。

使用例

CSSの追記での使用例は下記の通りです。

SWELLにあらかじめセットされているアイコンを指定するには、下記のCSSコードを使用します。

font-family: icomoon;

そこにエリアの指定とアイコンの種類を追記します。(下記では .p-toc のエリアにアイコン(大きさ1.5倍・色を変更)を加える例を紹介しています。

.p-toc{
 font-family: icomoon;  /*アイコンの呼び出し*/
 content: "\ea0e";  /*アイコンの種類指定*/
 color: #bd081c;  /*アイコンの色指定*/
 transform: scale(1.5);  /*アイコンの大きさ変更*/ 
}

これらのCSSコードを使うことで、ページにアイコンをセットすることが可能になります。

以上SWELLで簡単に使用できるアイコンのCSSコード一覧でした!

よかったらシェアしてね!

筆者について

プロダクトデザインにまつわる備考録です。このブログではデザインに関心なる方に向けて記事を作成しています。

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次
閉じる