SWELLで使えるアイコンをCSSで扱いたい!というときに便利なコード表を作成しました。
目次
アイコンの種類一覧
SWELLで使用可能なアイコンのCSSコードを記載しました。
企業ロゴ
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
機能アイコン
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
CSSを表示
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コード一覧でした!
コメント