2013-09-24 00:07:24 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta name="description" content="">
|
|
|
|
<meta name="author" content="">
|
|
|
|
|
2013-09-27 01:06:39 +02:00
|
|
|
<title>flag-icon-css</title>
|
2013-09-27 00:40:54 +02:00
|
|
|
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.no-icons.min.css" rel="stylesheet" id="bootstrap">
|
2013-09-26 01:39:19 +02:00
|
|
|
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
|
2013-09-25 22:00:00 +02:00
|
|
|
<link href="./assets/docs.css" rel="stylesheet">
|
2013-09-27 01:06:39 +02:00
|
|
|
<link href="./css/flag-icon-css.css" rel="stylesheet">
|
2013-09-24 00:07:24 +02:00
|
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
2013-09-27 01:06:39 +02:00
|
|
|
<a href="https://github.com/lipis/flag-icon-css"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
|
2013-09-24 17:13:35 +02:00
|
|
|
<div class="jumbotron text-center">
|
|
|
|
<div class="container">
|
2013-09-27 01:06:39 +02:00
|
|
|
<h1>flag-icon-css</h1>
|
2013-09-26 01:39:19 +02:00
|
|
|
<p>
|
2013-09-27 01:06:39 +02:00
|
|
|
CSS for vector based country flags!
|
2013-09-24 17:13:35 +02:00
|
|
|
</p>
|
2013-09-26 01:39:19 +02:00
|
|
|
<p>
|
2013-09-27 01:06:39 +02:00
|
|
|
<a href="https://github.com/lipis/flag-icon-css" class="btn btn-success btn-lg">
|
2013-09-26 01:56:18 +02:00
|
|
|
<span class="icon-github"></span>
|
2013-09-26 02:55:43 +02:00
|
|
|
View Project
|
2013-09-26 01:56:18 +02:00
|
|
|
</a>
|
2013-09-27 01:06:39 +02:00
|
|
|
<a href="https://github.com/lipis/flag-icon-css/archive/master.zip" class="btn btn-primary btn-lg">
|
2013-09-26 01:39:19 +02:00
|
|
|
<span class="icon-download-alt"></span>
|
2013-09-27 00:40:54 +02:00
|
|
|
Download
|
2013-09-26 01:39:19 +02:00
|
|
|
</a>
|
2013-09-25 22:00:00 +02:00
|
|
|
</p>
|
2013-09-27 00:40:54 +02:00
|
|
|
<p>
|
|
|
|
<button id="btn-bootstrap" class="btn btn-default btn-xs">Disable Bootstrap</button>
|
|
|
|
</p>
|
2013-09-24 00:07:24 +02:00
|
|
|
</div>
|
2013-09-24 17:13:35 +02:00
|
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<section id="examples">
|
|
|
|
<div class="page-header">
|
2013-09-25 22:00:00 +02:00
|
|
|
<h1>Examples (inline with text)</h1>
|
2013-09-24 17:13:35 +02:00
|
|
|
</div>
|
2013-09-27 00:40:54 +02:00
|
|
|
<div class="no-wrap">
|
|
|
|
<h1>
|
|
|
|
h1
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</h1>
|
|
|
|
<h2>
|
|
|
|
h2
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</h2>
|
|
|
|
<h3>
|
|
|
|
h3
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</h3>
|
|
|
|
<h4>
|
|
|
|
h4
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</h4>
|
|
|
|
<h5>
|
|
|
|
h5
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</h5>
|
|
|
|
<h6>
|
|
|
|
h6
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</h6>
|
|
|
|
<p>
|
|
|
|
p
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</p>
|
|
|
|
<p class="lead">
|
|
|
|
p.lead
|
|
|
|
<span class="flag-icon flag-icon-gr"></span>
|
|
|
|
<span class="label label-default"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-primary"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-success"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-info"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-warning"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
<span class="label label-danger"><span class="flag-icon flag-icon-gr"></span> GR</span>
|
|
|
|
</p>
|
|
|
|
</section>
|
2013-09-24 17:13:35 +02:00
|
|
|
</section>
|
2013-09-25 22:00:00 +02:00
|
|
|
<section id="more">
|
|
|
|
<div class="page-header">
|
|
|
|
<h1>Examples (on any element)</h1>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
2013-09-27 00:40:54 +02:00
|
|
|
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
|
2013-09-25 22:00:00 +02:00
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-gr"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2013-09-27 00:40:54 +02:00
|
|
|
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">
|
2013-09-25 22:00:00 +02:00
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-es"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-4 col-sm-4 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-gb"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-dk"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-de"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-ru"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-is"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-fr"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
2013-09-27 00:40:54 +02:00
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-ge"></div>
|
2013-09-25 22:00:00 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-ar"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-br"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-jp"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2013-09-27 00:40:54 +02:00
|
|
|
<div class="col-sm-2 col-xs-3 hidden-xs">
|
2013-09-25 22:00:00 +02:00
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-in"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-sa"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-sm-2 col-xs-3">
|
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-si"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2013-09-27 00:40:54 +02:00
|
|
|
<div class="col-sm-2 col-xs-3 visible-lg">
|
2013-09-25 22:00:00 +02:00
|
|
|
<div class="flag-wrapper">
|
|
|
|
<div class="img-thumbnail flag flag-icon-background flag-icon-ca"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
2013-09-24 00:07:24 +02:00
|
|
|
</div>
|
2013-09-24 12:02:48 +02:00
|
|
|
<script src="http://localhost:35729/livereload.js"></script>
|
2013-09-27 00:40:54 +02:00
|
|
|
<script src="./assets/docs.js"></script>
|
2013-09-24 00:07:24 +02:00
|
|
|
</body>
|
|
|
|
</html>
|