Quickly add Baseball club logos to your website or data visualization (For example, this webpage does not use any images)

A B C D E F G H I

J K L M N O P Q R S T U V W X Y Z a b c d z

A project built for Boston OnDeck Cup 2013, by Daigo Fujiwara, September 7-8, 2013.

Won the second prize. Read my blog post.

Download it!:
Font (.otf) ZIP Source Repo

Problem (user story)

As a front-end developer, I want a easy way to put logos of MLB clubs to websites/data visualizations, so that I can easily enhance visuals on my database driven contents without much fuss.

Solution

bbclub-font: An open source(*) icon font that contain 30 MLB team logos that can be used on websites, web apps, and data visualizations. Logos are simplified a little, intended to be used as small visual icons. Learn about why icon fonts are awesome (by Chris Coyer). This project is very much inspired by StateFace and Font-Awesome. * See License for details.

Getting Started

Download the OTF font, install on your machine and start using it in programs like Illustartor, Photoshop, MS Word, PowerPoint etc.

You can use them as webfont:

Quick way: Simply include this code on your webpage
<link rel="stylesheet" href="http://daigofuji.github.io/bbclub-font/css/bbclub-font.css">

Download the font folder and bbclub-font.css. Include it to your website (keep the below structure, or make sure your css points to the right relative "font" folder (lines 13-17)).

+--font/
|   +--bbclub-font-regular-webfont.ttf
|   +--bbclub-font-regular-webfont.eot
|   +--bbclub-font-regular-webfont.woff
|   \--bbclub-font-regular-webfont.svg
|
+--css/
    \--bbclub-font.css

And one more thing

If you are using it on your site, and font is referenced from other parts of site (like subdomain) or served though CDN, you may need to add .htaccess file for this to work on IE or FireFox. Read this blog post for detail.

Demos (not memos)

Usage

Put <i class="bbclub-TEAM ABBR"></i> or <i class="bb-TEAM ABBR"></i> (shorter version added) to display a logo in place. If you think of other abbrebiation that should be supported, please let me know.

Team	Accepted abbreviation	letter
AL East
Boston Red Sox	bos, BOS	A
New York Yankees*	nya, NYA, nyy, NYY	B
Tampa Bay Rays*	tba, TBA, tb, TB	C
Baltimore Orioles	bal, BAL	D
Toronto Blue Jays	tor, TOR	E
AL Central
Detroit Tigers	det, DET	F
Cleveland Indians	cle, CLE	G
Kansas City Royals*	kca, KCA, kc, KC	H
Minnesota Twins	min, MIN	I
Chicago White Sox*	cha, CHA, cws, CWS	J
AL West
Oakland Athletics	oak, OAK	K
Texas Rangers	tex, TEX	L
Los Angeles Angels*	ana, ANA, laa, LAA	M
Seattle Mariners	sea, SEA	N
Houston Astros	hou, HOU	O

Team	Accepted abbreviation	letter
NL East
Atlanta Braves	atl, ATL	P
Washington Nationals*	was, WAS, wsh, WSH	Q
Philadelphia Phillies	phi, PHI	R
New York Mets*	nyn, NYN, nym, NYM	S
Miami Marlins*	mia, MIA, flo, FLO, fla, FLA	T
NL Central
Pittsburgh Pirates	pit, PIT	U
St. Louis Cardinals*	sln, SLN, stl, STL	V
Cincinnati Reds	cin, CIN	W
Chicago Cubs	chn, CHN, chc, CHC	X
Milwaukee Brewers	mil, MIL	Y
NL West
Los Angeles Dodgers*	lan, LAN, la, LA, lad, LAD	Z
Arizona Diamondbacks	ari, ARI	a
Colorado Rockies	col, COL	b
San Francisco Giants*	sfn, SFN, sf, SF	c
San Diego Padres*	sdn, SDN, sd, SD	d

Team	Accepted abbreviation	letter
Alternative logo
Boston Red Sox	bos-alt, BOS-alt	e
MLB	mlb, MLB	z

Now supporting multiple sizes

Regular size:
Large (with class bb-large):
2x (class bb-2x):
3x (class bb-3x):
4x (class bb-4x):
5x (class bb-5x):

NOTE: White Sox, Royals, Angels, Dodgers, Mets, Yankees, Padres, Giants, Cardinals, Rays, Marlins and Nationals have team abbrebiation aliases.

License

Font is licensed under SIL OFL 1.1 and css and html codes are licensed under MIT License, but rights to team logos belongs to the MLB and its teams, please use according to their terms.

DISCLAIMER: bbclub-font is a tool created by a passionate baseball fan (and contributors) and is not endorsed by or affiliated with Major League Baseball or its teams.