Font Awesome 5でKitsを使うとCSS疑似要素が使えない

前の記事でBogoの言語スイッチャーをとてもシンプルにする方法を説明した。英語のページで日本語のページが存在するときには、「日本語」とだけ表示される。

これではシンプルすぎて切り替えられるのかどうかがわかりにくいので、Font Awesome 5を使って以下のようにアイコンを付けることにする。

最近、Font AwesomeはKitsを使うことを勧めていて、以下のようにCDNからCSSを読み込む手法は時代遅れのようなので、Kitsを試したところすごくはまった。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/solid.css">  

Font Awesomeを使う際に、以下のようにstyle.cssでCSS疑似要素を使って<a>タグの前にアイコンを配置する方法を使いたかったのだが、これがKitsでは使えないというすごい罠があった。

.bogo-language-switcher a::before{  
    font-family: "Font Awesome 5 Free";  
    font-weight: 900;  
    content: "\f362";  
    padding-right: 6px;  
}  

余計なことを考えずにheader.phpにCSSの読み込みを挿入するだけでよかった。

    <?php endif; ?>  
    <?php wp_head(); ?>  
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/solid.css">  
</head>