CDNで導入
CloudFlareのcdnjsを使う。
cdnjsとは？
CloudFlareという会社が提供している無料のオープンソースCDNサービスで、GitHubに公開されているJavaScriptライブラリやCSSライブラリを配信*している。
気になるライブラリがあれば、cdnjsサイトで検索して配信URLを見つけられる。
＊2021.10.29時点で4,075のライブラリを配信
cdnjsのcssを読み込むだけで導入完了
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.3/css/flag-icons.min.css" rel="stylesheet">
バージョンの更新など気になる方は、cdnjsで検索して確認ください。
使い方
空のspanタグやiタグで使用する
空のspanタグなどにclassでflag-iconとflag-icon-●●を付ける。●●の部分は2文字の国名コード（ISO 3166-1のalpha-2）が入る。日本だとjp、アメリカだとusなど。
国名コードは本家のデモopen_in_newでも確認できる。
<span class="flag-icon flag-icon-un"></span>
<span class="flag-icon flag-icon-eu"></span>
<span class="flag-icon flag-icon-jp"></span>
<span class="flag-icon flag-icon-bd"></span>
これだけで簡単にSVGのきれいな国旗が表示できた。国旗だけでなく、国連の旗や欧州旗もある。
正方形で表示する
正方形の指定もできる。classにflag-icon-squaredを追加する。
<span class="flag-icon flag-icon-un flag-icon-squared"></span>
<span class="flag-icon flag-icon-eu flag-icon-squared"></span>
<span class="flag-icon flag-icon-jp flag-icon-squared"></span>
<span class="flag-icon flag-icon-bd flag-icon-squared"></span>
正方形の表示例。
背景で利用する
classのflag-iconをflag-icon-backgroundに変更すると、疑似要素ではなく背景として利用できる。
<div class="flag-icon-background flag-icon-jp"> </div>
おわりに
CDNの導入は簡単ですが、cdnjsのサービスが停止したり、利用しているライブラリの配信が中止になったりすると、導入したサイトで使用できなくなる。CDNなので自前のサーバーに置くよりメリットがあり、滅多な事で停止したりしないとは思うが。
心配な場合は、本家のGitHubからインストール or ダウンロードして利用する。