アイコン

アイコンフォント

Startify-UIに収録されているアイコンは、アイコンフォントとして扱うことのできるユーティリティクラスが用意されています。su-icon-[ICON_NAME]のクラスを付与することで、対応するアイコンをテキストとして表示することができます。サフィックスとなるアイコン名はデザイントークンのこちらのドキュメントから収録されているアイコンの一覧をご確認ください。

※表示やレイアウトに影響が出る場合があるので、アイコンのユーリティリティクラスを付与する要素は子要素やテキストノードを含めないようにすることを推奨します。

アイコンは疑似要素を用いてテキストコンテンツとして表示されるため、文字サイズや背景色の指定により、アイコンの色やサイズを変更することができます。

<span class="su-icon-user"></span>

<!-- アイコンはテキストとして表示されるので色やサイズを変更できます -->
<span class="su-icon-user su-text-2l" style="--su-color-icon-text: red;"></span>

クラス名の一覧