国旗アイコンサービス

国旗アイコンを表示するサービス

多言語サイトの言語切替えのアイコンとして…とか。

flag-icon CSS
flag-icon SVG 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.9.0/css/flag-icon.css">

<!-- jp、usの部分を表示したい国の略語に変える -->
<i class="flag-icon flag-icon-jp"></i>
<i class="flag-icon flag-icon-us"></i>

<!-- flag-icon-squared で正方形の国旗になる -->
<i class="flag-icon flag-icon-jp flag-icon-squared"></i>
<i class="flag-icon flag-icon-us flag-icon-squared"></i>


i[class^='flag-icon'] {
	font-size: 80px;
	margin: 1rem;
	}
.flag-icon-jp {  /* 日の丸は白地のため。色背景の場合は不要… */
	border: 1px #ccc solid;
	}

TOP