'County' comprises of a pair of symbol fonts, both representing the counties of Ireland. The fonts can be added to your web projects, be styled and modified, using only HTML and CSS.

County-Map Font

County contains two different fonts. The first font is called 'County-Map'. This is a symbol font that allows you to put together a map of Ireland made solely of font symbol glyphs. Each symbol represents a county and when used together all symbols can be fitted together to make up a complete map. Each County can be styled and used independently.

County-Icon Font

The second font is called 'County-Icon'. This is similar in many ways to the County-Map font in that it is a symbol font that represents the counties of Ireland. It differs from the previous font however, in that it is optimized to be used alongside regular none-symbol fonts and text. Each symbol fits the size of a regular text element in that the heights, widths and positions are approximate to regular text fonts. The County-Map font is not ideal for this type of usage as the County-Map symbols are sized and positioned relatively to the other counties on the map.

Both fonts have their own unique use cases and some examples can be seen below. Download the Fonts and get started straight away. As well as the font files, there is sample HTML and CSS included in the download package to help you get started.

County-Map Font

Each of the counties exists as a glyph within an SVG font which I created. When used together they form part of a bigger whole, i.e. the island of Ireland. Each individual county can be styled independently of the others, counties can also be left off the map altogether. You can have as many or as few counties on the map as you wish, anywhere from 1 to 32.

HTML

  <ul class="county-map" id="plain">
  	<li data-county="an" class="an">a</li> 
  	<li data-county="ar" class="ar">b</li>
  	<li data-county="cw" class="cw">c</li>
  	...
  	<li data-county="so" class="so">z</li>
  	<li data-county="tp" class="tp">A</li>
  	...
  </tr>

CSS

.county-icon {
	font-family: 'countymapregular';
	color:#f0f0f0;//gray
	...
}
   	...

If you are interested in developing using this font then please view GitHub for further info. See below a set of examples I have done up to show some uses for this font. Remember, the below are not images but fonts, styled using CSS.

Plain

Provinces

Northern Ireland

Just the Republic

Mayo For Sam!

County-Icon Font

As I mentioned above this font has been optimized to work alongside regular font types. As you can see from the samples below the size and shape are equivalent to their text counterparts. The bottoms and tops of the counties should line up closely with regular text when written together. All the elements seen below, both counties and text, have identical font styling applied to them. The county symbols replace regular alphabetical characters. As you see from the below example, a CSS class called county-icon is applied to letters of the alphabet.

HTML

<table>					
	<tr>
   		<td class="county-icon">a</td>
   		<td>Antrim</td>
   		<td>a</td>
   	</tr>
   	...

CSS

table {	
	font-size: 1em;	
}
.county-icon {
	font-family: 'countyiconregular';
	...
}
...

With this in place, wherever a letter from a to z or A to F is used, it will be replaced by the County-Icon glyph for that county. If you are interested in developing using this font then please view GitHub for further info.

a	Antrim	a
b	Armagh	b
c	Carlow	c
d	Cavan	d
e	Clare	e
f	Cork	f
g	Derry	g
h	Donegal	h
i	Down	i
j	Dublin	j
k	Fermanagh	k

l	Galway	l
m	Kerry	m
n	Kildare	n
o	Kilkenny	o
p	Laois	p
q	Leitrim	q
r	Limerick	r
s	Longford	s
t	Louth	t
u	Mayo	u
v	Meath	v

w	Monaghan	w
x	Offaly	x
y	Roscommon	y
z	Sligo	z
A	Tipperary	A
B	Tyrone	B
C	Waterford	C
D	Westmeath	D
E	Wexford	E
F	Wicklow	F
Z	Ireland	Z