semantic-uiで<i>タグが使えない時の対処法

前提

semantic uiはbootstrapライクなjs/cssフレームワークです。
bootstrapと比べて見た目から意味がわかりやすくなることを目的としています。

症状

semantic uiでもアイコンが使えるのですが、適当な使い方をしてると動かない時があります。

<i icon='wifi-icon'></i> ←見えない！

そういう時はちゃんとフォントのアイコンの取得に成功しているか確認すると良いです。

こんな風にファイルの獲得に失敗していたら、適切な場所に適切なフォントファイルを置いてそれをダウンロード可能にしていなかった可能性が高いです。
具体的にはcssファイルが置いてある所から相対パスで見て/themes/default/assets/fontsという場所にアイコンファイルを探しにいっています。

対策

要求される場所にディレクトリを掘ってアイコンファイルを置く事自体はたやすいですが、そのためだけに3階層もディレクトリ掘っていくのもあれだし、既存のフォント置き場との一貫性もどうにかしたいので、アイコンを探しに行く場所を書き換えましょう。
具体的にはsemantic.cssとは別で読み出してる自分のcssファイルの中で以下の内容を書きます。

mypage.css

@font-face {
  font-family: 'Icons';
  src: url("fonts/icons.woff2") format('woff');
}

そしてfontsディレクトリ以下にsemantic ui以下に置いてあるicons.woff2を置けば動きます。