【Web】国旗アイコンをフリーで利用する:Flag Icon CSSの使用方法

時計 2024.02.01 / 時計

【Web】国旗アイコンをフリーで利用する:Flag Icon CSSの使用方法

記事ではWebサイトで国旗アイコンフリーで簡単に利用できるFlag Icon CSSについて解説していきます。

Webサイトで国旗アイコンを利用したい場合、わざわざ国旗アイコンをネット上からダウンロードして利用していませんか?

CSSベースのアイコンライブラリ「Flag Icon CSS」を利用することで簡単にWebサイトに国旗アイコンを追加できます。

本記事を通して、国旗アイコンをフリーで追加できる「Flag Icon CSS」について理解を深めてください。

Flag Icon CSSとは

Flag Icon CSSとはCSSとSVGの国旗アイコンを利用して、簡単にWebサイトに国旗を表示できるライブラリです。

Webサイト:国旗アイコン

Flag Icon CSSは各国のISO国コードに対応するクラスを提供しており、利用したい国コードのクラスを使うことで希望する国旗をサイト上に表示します。例えばクラスに「fi-jp」を指定すれば日本の国旗アイコンが表示されます。

このライブラリには4×3または1×1の形式で国旗は容易されています。

Flag Icon CSSを利用することでわざわざ国旗アイコンをネット上から集める必要やサイズを調整する必要がありません。Flag Icon CSSでは国旗アイコンを利用したい開発者が簡単にWebサイトに追加できるように設計されています。

ライセンスはMITライセンスです。対象のGitHubへは以下リンクからアクセスできます。

GitHub - flag-icons

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">
IT用語の確認

CDN(Content Delivery Network)とはウェブコンテンツを配信するサーバーネットワークです。世界中に配置さえたサーバーの中から最も近いサーバーからコンテンツを受け取ることができます。これにより物理的な距離による遅延を最小限に抑えます

またはパッケージマネージャーでプロジェクトにライブラリを追加する場合は以下Yarnコマンドまたはnpmコマンドを実行してください。

yarn add flag-icons

npm install flag-icons

Flag Icon CSSの使用方法

Flag Icon CSSによる国旗アイコンを表示するには「fi」と「fi-xx」(xxには使用したい国の国コードを入れる)の2つのクラスを入れるだけです。

例えば日本の国旗アイコンを表示したい場合は次のようにコードを記述します。

<i class="fi fi-jp"></i>

たったこれだけです。上記の短いコードで希望する国の国旗アイコンがサイトに表示されます。

1×1の正方形の国旗アイコンを利用したい場合は2つのクラスに加えて「fis」クラスを追加してください。

<i class="fi fi-jp fis"></i>