テキストの先頭にアイコン

短いテキストの先頭にアイコンを表示させるモジュール

記事の作者や公開日など定型の情報を表示するの使われる

アイコンフォントを使用する

短いテキストの先頭にアイコンを表示させるために、アイコンフォントを使用する

アイコンフォントとは文字の代わりにアイコンを収録したフォント

Font Awesome を使用する

Font Awesome を使用するためには、<head> ～ </head> 内にフォントデータを読み込むための <script> タグを追加する

実際の運用では、後出のコラムを参照

※ なぜかわからんが、テキストの HTML ではデータを読み込めなかったので、やむを得ず all.js を使用することにした

連続するテキストを読みやすくきれいに配置するには、テキストとテキスト、アイコンとテキストのスペースをうまく調節する

マージン、パディングを使ってスペースを調整する

※ i タグに直接 CSS が設定できない？ので、.iFont を設定することで回避

項目と項目の間に一定のスペースを設けるときは、マージンを使うようにする

各項目にリンクを付けようとして <span> でなく <a> で囲んだ場合、パディング領域もクリックできてしまう

背景色とリンクのクリック可能範囲を考えて、短いテキストの間にスペースを作る場合は、常にマージンを使うようにする

Font Awesome アイコンを使うには、HTML ドキュメントに 2つのタグを挿入する必要がある

※ テキストの内容は実際の運用と異なるため省略

※ 実際にはフォントデータをダウンロードして、サーバーにアップした上で all.js ファイルを読み込む