flag-icon-css: how to use 🇬🇧

2020-01-26 2020-02-08 16:52:31 CSS,icon,EN

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">

Links


This website uses Cookies to provide you with the best possible service. Please see our Privacy Policy for more information. Click the check box below to accept cookies. Then confirm with a click on "Save".