Ligature Symbolsを使ってみる | ohmix.net / Room y.ohm

公開日: 2019年08月29日　更新日: 2019年09月14日

Ligature Symbolsとは何か？

Ligature Symbolsは、SIL Open Font Licenseに基づいてダウンロードと使用の可能なアイコンフォントです。

まずはダウンロード

まずは、Ligature Symbols のサイトを開きます。

下へスクロールして行くとDownloadボタンがあるので、クリックします。

ダウンロードできたら今度はアップロードです。ZIPアーカイブを展開してから、サーバの適切な場所に置きます。
私はLigatureSymbolsというディレクトリを作り、そこへ丸ごと転送しました。その際、style.css を編集して、新たにLigatureSymbols.cssを作りました。少なくとも、/* RESET */ から /* IEPNGFIX */ の直前まで、/* ELEMENT */ から .lsf-input { の直前までは消した方が良いと思います。

<link rel="stylesheet"
href="/LigatureSymbols/LigatureSymbols.css">

このコードを</head>の直前あたりに書くのが良いでしょう。WordPressの場合だと、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]で編集できます。ここまでで準備完了です。

使ってみる

アイコン一覧は Ligature Symbols にあります。

さて、どうやってアイコンを表示するのかですが、このCSSでは、

<i class="lsf">[名称]</i>

もしくは

<i class="lsf-icon" title="[名称]"></i>

という形になります。humanの場合、

<i class="lsf">human</i>

もしくは

<i class="lsf-icon" title="human"></i>

となります。

このコードを必要とする場所へ貼り付ければ、ひとまず目的は達成です。

human

色と大きさを変えてみる

human

<span style="font-size: 3em; color: Tomato;">
  <i class="lsf">human</i>
</span>
 
<span style="font-size: 48px; color: Dodgerblue;">
  <i class="lsf">human</i>
</span>
 
<span style="font-size: 3rem; color: Mediumslateblue;">
  <i class="lsf">human</i>
</span>

モノはフォントなので、いろいろとできます。左のは3文字分の高さ(親基準)に指定。真ん中のは48×48ピクセルに指定。右のは3文字分の高さ(ルート基準)に指定。

相対的に大きさを変えてみる

human
human
human
human
human
human
human
human

<i class="lsf" style="font-size: 0.75em;">human</i>
<i class="lsf" style="font-size: 0.875em;">human</i>
<i class="lsf" style="font-size: 1.33em;">human</i>
<i class="lsf" style="font-size: 2em;">human</i>
<i class="lsf" style="font-size: 3em;">human</i>
<i class="lsf" style="font-size: 5em;">human</i>
<i class="lsf" style="font-size: 7em;">human</i>
<i class="lsf" style="font-size: 10em;">human</i>

human
human
human
human
human
human
human
human

<div style="font-size: 0.5rem;">
  <i class="lsf" style="font-size: 0.75em;">human</i>
  <i class="lsf" style="font-size: 0.875em;">human</i>
  <i class="lsf" style="font-size: 1.33em;">human</i>
  <i class="lsf" style="font-size: 2em;">human</i>
  <i class="lsf" style="font-size: 3em;">human</i>
  <i class="lsf" style="font-size: 5em;">human</i>
  <i class="lsf" style="font-size: 7em;">human</i>
  <i class="lsf" style="font-size: 10em;">human</i>
</div>

human
human
human
human
human
human
human
human

<div style="font-size: 24px;">
  <i class="lsf" style="font-size: 0.75em;">human</i>
  <i class="lsf" style="font-size: 0.875em;">human</i>
  <i class="lsf" style="font-size: 1.33em;">human</i>
  <i class="lsf" style="font-size: 2em;">human</i>
  <i class="lsf" style="font-size: 3em;">human</i>
  <i class="lsf" style="font-size: 5em;">human</i>
  <i class="lsf" style="font-size: 7em;">human</i>
  <i class="lsf" style="font-size: 10em;">human</i>
</div>

表示されているアイコンの見た目の下端は揃っています。ただ、アイコンの上下にかなりのスペースが空きますね。

まとめ

Ligature Symbolsに付属のstyle.cssはあくまで例のようで、テーマヘッダで丸ごと読み込んでしまうとうまくないです。よく読んで、自分に必要な部分のみを拾い上げる必要があります。

[Top]

　