14 Social Media Icon Sets

As many of you know, there are some crappy icon sets out there. Here are a few that I deem acceptable for general consumption. Enjoy!

Aquaticus Social icons

High Gloss Web 2.0 Icons

108 Free Matte White Square Social Networking Icons

154 Matte Black Social Media Icons

Web 2 Icons

Webtoolkit Icon Set Vol. 1

Free Vectors – 20 Free Social Bookmarking Icons

Social Media Icons Pack

34 (ou plus) boutons gratuits pour votre site

Socialize Icons

Web social icons

Social Post Stamps: Free icon set

Polaroid icon set

Set of social icons no.3

Bonus: Twitm Icon (very slick app-icon)

Woo! WordPress 2.8.

wordpress-logo-hoz-rgb

WordPress 2.8 is out! If you haven’t already you should go download it now.

As of this post WordPress 2.8 has been downloaded 1,522,482 times, that’s pretty amazing.

I’m actually blown away every time I install a new version of WordPress. It seems like they iron out a few more rough spots each release and the whole experience just gets that much better. As far as open source projects go, the WordPress team definitely has their shit together.

In other news. I’ve been doing some contract work for a client, part of which includes getting them moved from WordPress.com to a self-hosted WordPress blog.

After getting WordPress 2.8 up and running it was time to do some skinning. We decided that the Puretype Theme from Elegant Themes would be a good place to get started. After that, it only took a few hours to modify Puretype a bit to match the client’s website. It helps speed things up immensely when you have some pre-existing graphics to work with.

You can see the final result at blog.goodtugo.com.

User Friendly Design: Attachment Icons

Last October I helped launch www.psylabstudios.com, an online store for my friend Lars so he can hawk merch for his band Oneiroid Psychosis. This was my first foray into ecommerce, one that went pretty smoothly all things considered. We couldn’t use SSL, so we ended up using the Google Checkout API. I wrote a custom shopping cart for the site using the Google Checkout PHP library…

Anyway, I’m rambling. Fast forward 9 months to today. Lars emails me and asks for a way to create free items that are available for download. Things like computer wallpapers, screensavers and so on. I decided that the best way to accomplish this would be to add an “attachment” feature to store products. This way Lars could attach an arbitrary number of files to any product in the store.

The attachment plugin was fairly straightforward, since this is only an administrative feature. But I wanted it to make sure that users were clear on what exactly it was they were downloading.

I was initially going to use PHP’s mime_content_type() function to identify uploaded files, but it simply didn’t work (good thing it’s deprecated). Then I was going to use the finfo_file() function, but was unable to install PECL extensions on this particular site’s hosting environment. If you’re lucky enough to be running PHP 5.3.0, then finfo_file() is installed by default. No such luck here though.

Finally I decided to use a simple regular expression to scrape the file extension (like .jpg or .doc) from the file name. This is not a recommended way to do this, as it’s completely unreliable, but it’s better than nothing.

  1. <?php
  2.   preg_match('/\.([\w]{2,4}?)$/i', $filename, $matches);
  3.   echo $ext = $matches[1];
  4. ?>

The above regex will return $matches[1], which should be a 2 to 4 digit file extension (without the period). Now, the magic can happen!

Since we have a fairly good guess of what the filetype is, we can now assign a CSS class to the download link that will display an appropriate file icon. As an example, a video file will get a video icon, an MP3 will get a music icon and an Excel file will get a Microsoft Excel icon (see gallery below for examples). I’m using the Fugue icon set for this site (I know I’ve been pushing those icons a lot lately, but I’m just in love with them).

Finally, we can use the filesize() function to get the size of the file and display it to the user. This way they know what they’re getting into before they click download (helpful if they’re on a slow connection).

This may seem like a lot of work, but it really isn’t. It also greatly contributes to the overall experience of your site visitors. Plus it’s a lot of fun to write shiny web-applications.

UPDATE:

You can do this even easier using CSS selectors.

a[href$='.pdf'] {
  padding-left: 16px;
  background: url('icons/pdf.png') no-repeat left;
}

All this says is look for any anchor tag whose href value ends with “.pdf” and give it a background image. This is a super easy way to add context (and a little flair) for your site visitors.

Fugue – The Best Icon Set on the Web

Having the right icon set can make or break a web development project. Confusing icons will frustrate users and drive them away from your application. There is no excuse for using ugly icons or even no icons at all on your web application.

Fugue
For my last few projects I’ve been happily using an icon set called Fugue. Available under a Creative Commons Attribution 3.0 license, the Fugue icon set is fantastically sharp looking and contains a broad array of icon types. Yusuke Kamiyamane, Fugue’s designer, updated the icon set as recently as July 3, 2009. As of today, Fugue is at version 2.2 and contains 2,200 icons. If you don’t wish to include an attribution on your site, you can purchase a royalty-free license for $49.95 USD.

Diagona
An alternative to the comprehensive Fugue icon set is Diagona, also by Yusuke Kamiyamane, which contains a mere 400 icons. You can purchase a royalty free license to Diagona for a meager $9.95 USD.

Silk
silk

Runner up to Fugue is the always popular Silk icon set by Mark James. Silk contains 700 .png icons completely free of charge. That’s $0.00 USD people. Can’t beat that. Silk is also available under a Creative Commons Attribution 3.0 license and is currently at version 1.3.

Please let me know if you have any other favorite icon sets that you use for your projects!

Photos, Multimedia and Journalism

Well, it’s been a long time since my last post, but for good reason! I’ve had quite the busy term and I thought it would be nice to show you what I’ve been up to all term. The main thing keeping me busy was a photojournalism class at the University of Oregon. I ended up with a pretty nice portfolio and a multimedia story on Eugene’s local (now defunct) Bar 201. You can view the awesome multimedia slideshow here:

http://www.tristanwaddington.com/share/j365-photostory/

Most of my other photos are up at my Flickr account, but you can also click through to see some highlights from my portfolio.

Continue reading