Country flags are often used in language-specific selections or for content related to a specific country. J1 Theme supports using country flags to make language selections or country indicators more visual to support your visitors by making a more meaningful presentation.
J1 Theme integrates the CSS definitions of the project Flag Icons managed by Panayiotis Lipiridis. Flag Icons is a collection of country flags in SVG vector format. All icons can be automatically resized with no loss in display quality.
15-30 Minutes to read
HTML Markup
There is no official HTML markup for CSS font icons, but 2 markups are
widely used. Both markups can be used in block elements like the anchor
tag <a> or use span elements <span>. That way, it’s on you what to use
for font based icons.
<span class="flag-icon flag-icon-gr rectangle size-md" role="img" aria-label="flag-gr"></span> (1)
<i class="flag-icon flag-icon-gr rectangle size-md"></i> (1) (2)| 1 | Both forms are consistent with the HTML5 specification |
| 2 | It’s short and the i tag <i> may associated for an icon
(semantic meaning) |
|
The i tag |
Asciidoc Markup
For pages using Asciidoc for the source, a easier solution is available by using markups from Asciidoc.
pass:[<i class="flag-icon flag-icon-<name> <style> <size> <modifier>"></i>] (1)
flag:country[style, size, modifier] (2)| 1 | Markup using a pass block |
| 2 | Markup using the Asciidoc (inline) extension flag |
Styles
Two styles are available for country flag icons: rectangle rectangle
and squared squared. The default style is rectangle 4:3 of the icon.
For more compact placement, all icons can be used in a squared format 1:1.
flag:de[rectangle, md] Germany, rectangle style +
flag:de[squared, md] Germany, squared style-
Germany, rectangle style
-
Germany, squared style
Sizes
For more specific placement, or to place emphasis on, all icons can be
specified in different sizes by the optional size parameter size.
|
The size of a flag is typically specified relative to the base font
size. Today, the base font size is set to 16 pixel |
See with the following what sizes are available.
Relative Sizes
For a better Bootstrap integration and for responsiveness, the icon size can
be given like the view-port shortcuts from xs to xl xs, sm, md,
lg, xl.
| Size | Style | Markup | Render |
|---|---|---|---|
|
|
rectangle |
Germany
|
|
|
|
rectangle |
Germany
|
|
|
|
rectangle |
Belgium
|
|
|
|
rectangle |
Denmark
|
|
|
|
rectangle |
Spain
|
|
Proportional Sizes
All icons can be specifier relativ to their base size from 1x 1x
to 10x 10x. See the examples with the table below.
| Size | Style | Markup | Render |
|---|---|---|---|
|
|
rectangle |
Germany
|
|
|
|
rectangle |
Denmark
|
|
|
|
rectangle |
Spain
|
|
Modifiers
For better placement, additional CSS styles called modifiers can be specified like so:
flag:de[rectangle, md, ml-3 mr-3 mb-2] Germany, rectangle style +
flag:de[squared, md, ml-3 mr-3 mb-2] Germany, square style Germany, rectangle style
Germany, square style
Flags Overview
Find all flags available in alphabetical order.
A - C
D - G
H - M
N - S
T - Z
