flag-icon-css: how to use 🇬🇧

2020-01-26 00:00:00 IN1 , 2023-04-10 14:16:31 IN1

Get the library

Using CDN

cloudflare.com

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

Via Installation

direct

bower install flag-icon-css

via bower.json

...
"flag-icon-css": "3.4.5"
...

Usage

flag-icon

css; rectangle flag (4:3)

<span class="flag-icon flag-icon-de"></span>

css; squared flag (1:1)

<span class="flag-icon flag-icon-squared flag-icon-de"></span>

flag-icon-background

example with table

<table class="table table-hover">
  <thead>
    <tr>
      <th>Country</th>
      <th>Team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="flag-icon-background flag-icon-de"></td>
      <td>Alpha</td>
    </tr>
  </tbody>
</table>

Country	Team
	Alpha

img tag

img tag; rectangle flag (4:3)

<img src="/bower_components/flag-icon-css/flags/4x3/de.svg" width="20" class="img-fluid">

img tag; squared flag (1:1)

<img src="/bower_components/flag-icon-css/flags/1x1/de.svg" width="20" class="img-fluid">