こんにちは。

ボタンアイコンの::before ::afterオンパレードな作図と、1px単位の微調整に疲れてしまったので、何か良い方法は無いか探していた所、アイコンフォントなる物を見つけ、使用感も良かったので備忘録。

アイコンフォント

1アイコンが1記号文字として収録されている、アイコンのみのフォントファイル。
通常のフォントファイルと同様に、大抵は下記主要フォーマットのうちいずれかをサポート。

メリット & デメリット

何より「アイコン構成部品同士のレイアウトが崩れない」に尽きるでしょう。
そもそも「1文字」なので、崩れようがありません。
設置する際のCSSも、最低限font-family content: "Unicode番号"があれば動くので、記述量が少なくなりコードが見やすくなる点も挙げられます。

あくまで「文字」なので、アニメーションには弱いです。
回転させたり変化させたり、そういった用途には向きません。

有名所はいくつかありますが、Kazuyuki Motoyama氏作成のLigatureSymbolsを使用します。
理由は、フォントファイルサイズと収録アイコン量のバランスが丁度良いからです。
アイコンデザインもスッキリしていて個人的には好みです。

上記の公式ページからzipファイルで入手可能です。

主に設定画面への誘導用として用いられる事が多い、歯車アイコンを設置してみます。

@font-face {
    font-family: LigatureSymbols;
    src: url("LigatureSymbols.ttf") format("truetype");
}

まずはフォント定義
url(...)はフォントファイルの配置場所により適宜変更

.icon {
    font-family: LigatureSymbols;
    font-size: 2em;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

アイコンを配置する際の共通クラス

.icon.options::before {
    content: "\E055";
}

.optionsは歯車アイコンのUnicode番号\E055を適用する為のクラス
Unicode番号はcontentにて指定しなければならないので、ここだけ::beforeを使う

html

<label class="icon options">
    <button onclick="openOptions();" hidden></button>
</label>

お好みでHTMLに適用して完了

良い感じ！

ちなみにこれはElectronアプリゆえ、わざわざonclickからのremote.BrowserWindowで開かないといけないワケ。

~~VSCodeのダークテーマっぽい配色にすれば、どんな駄作でもそれっぽく見えるって1048576回は言ってる~~

アイコンフォント、圧倒的に便利でした。
導入も簡単なので、サクっとアイコンを置きたい時は良い選択肢になると思います！