Semantic UI Doc ( Elements - Icon, Image ) を読む

Icon

Semantic UI の Icon を読んだ。アイコンにテーマはない。

Semantic UI はアイコンを Font Awesome 5.0.8 のものを使い、アイコンフォントで表示する。

<!-- i 要素に対して、基本クラス .icon と指定したいアイコン名（以下では .users ）を指定 -->
<i class="icon users"></i>

アイコンには状態があり、無効な状態は i.disabled.icon、読み込み中の状態は i.icon.loading であらわすことができる。

また、バリエーションもいくつかある。周囲のコンテンツにフィットするようサイズを変更するクラス、サイズのバリエーションクラス、リンクとして表示するクラス、上下や左右を逆さまにするクラス、円にアイコンを表示するクラス、正方形にアイコンを表示するクラス、色や反転色をつけるクラスなど。

アイコンを重ねて、組み合わせて使うこともできる。まったく同じ開始位置とサイズで 2 つのアイコンを表示したり、基準となるアイコンに対して四隅どこかに 2 つ目のアイコンを表示したり。文章で説明してもピンとこないかもしれないが、使用例を Icon - Definition のページで見ると「あぁ、なるほど」と思うかも。

Image

Semantic UI の Image を読んだ。イメージにテーマはない。

イメージクラスは img または svg 要素に直接指定するか、イメージのコンテナーにクラスを指定する。.ui.image のベースクラスと、サイズ指定クラス（.small など）を組み合わせて使う。

<!-- img 要素に指定 -->
<img class="ui small image" src="...">

<!-- img 要素のコンテナーに指定 -->
<div class="ui small image">
  <img  src="...">
</div>

イメージは状態クラスがあり、非表示（ display: none ）、無効状態がある。

また、見た目のバリエーションも多く、アバター画像用のクラス、枠線をつけるクラス、幅いっぱいの画像にするクラス、画像に角丸をつけるクラス、画像を円形にするクラス、画像と水平に並べるテキストの縦方向の位置を決めるクラス、画像の水平方向の位置を指定するクラス、文章の中に画像をインラインで表示するとき周囲に余白を持たせるクラス、サイズのバリエーションクラスなどがある。

.ui.images で複数の画像を包むと、画像はグループとして表示することも可能。