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.

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.

or

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

or

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 logo 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 logo 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 logo 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.

See also: definition of a Fair Use.