【Web】国旗アイコンをフリーで利用する：Flag Icon CSSの使用方法
2024.02.01 /
本記事ではWebサイトで国旗アイコンをフリーで簡単に利用できるFlag Icon CSSについて解説していきます。
Webサイトで国旗アイコンを利用したい場合、わざわざ国旗アイコンをネット上からダウンロードして利用していませんか？
CSSベースのアイコンライブラリ「Flag Icon CSS」を利用することで簡単にWebサイトに国旗アイコンを追加できます。
本記事を通して、国旗アイコンをフリーで追加できる「Flag Icon CSS」について理解を深めてください。
Flag Icon CSSとは
Flag Icon CSSとはCSSとSVGの国旗アイコンを利用して、簡単にWebサイトに国旗を表示できるライブラリです。
Flag Icon CSSは各国のISO国コードに対応するクラスを提供しており、利用したい国コードのクラスを使うことで希望する国旗をサイト上に表示します。例えばクラスに「fi-jp」を指定すれば日本の国旗アイコンが表示されます。
このライブラリには4×3または1×1の形式で国旗は容易されています。
Flag Icon CSSを利用することでわざわざ国旗アイコンをネット上から集める必要やサイズを調整する必要がありません。Flag Icon CSSでは国旗アイコンを利用したい開発者が簡単にWebサイトに追加できるように設計されています。
ライセンスはMITライセンスです。対象のGitHubへは以下リンクからアクセスできます。
Flag Icon CSSの使い方
CSSのインストール
CDNを利用する場合は以下のコードをheadタグ内に追加してください。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/7.1.0/css/flag-icons.min.css">CDN（Content Delivery Network）とはウェブコンテンツを配信するサーバーネットワークです。世界中に配置さえたサーバーの中から最も近いサーバーからコンテンツを受け取ることができます。これにより物理的な距離による遅延を最小限に抑えます
またはパッケージマネージャーでプロジェクトにライブラリを追加する場合は以下Yarnコマンドまたはnpmコマンドを実行してください。
yarn add flag-icons
npm install flag-icons
Flag Icon CSSの使用方法
Flag Icon CSSによる国旗アイコンを表示するには「fi」と「fi-xx」（xxには使用したい国の国コードを入れる）の２つのクラスを入れるだけです。
例えば日本の国旗アイコンを表示したい場合は次のようにコードを記述します。
<i class="fi fi-jp"></i>たったこれだけです。上記の短いコードで希望する国の国旗アイコンがサイトに表示されます。
1×1の正方形の国旗アイコンを利用したい場合は2つのクラスに加えて「fis」クラスを追加してください。
<i class="fi fi-jp fis"></i>
関連記事
