BETA

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

投稿日:2019-08-11
最終更新:2019-08-11

前の記事で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>  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@fujiedaの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう