Spruce Up Your Site With Custom Icons

Subscribe LinksI'm far from a theme ninja when it comes to Drupal. But I do my best to do what I can to give my sites a distinct look and feel. One way to offer up that distinct look and feel is to sprinkle links on your sites with custom icons.

On this site I've got two areas where I'm serving up icons that are not part of the original theme. My subscribe block (pictured at left) contains images that highlight the links for RSS, site bookmarking and email subscription.

I also use these images in other blocks when I'm linking to pages. You can see this in action in the watch and listen blocks on the front page. This technique is a departure from the normal look and feel of the theme. It also helps certain links to catch the eye of the user a bit more easily.

Finding Icons

My favorite icon set, and the one I'm using on this site, is the free Silk Icon Set from FamFamFam.com. This is one sweet icon set. And the price is right too! You can find other free icon sets by performing a search on Google. Another free set that I have taken a liking to is the User Interface Icon set. This set is also free and features icons of various sizes.


User Interface Icons

Adding Icons To Your Site

The process of adding icons is a relatively simple one. Find a set you like. Download them to your computer. Upload the icons to a folder on your Drupal site. Then link to the images in blocks, nodes, pages, or wherever you like. When you are adding icons to blocks, for example, make sure you choose the Full HTML input format or your icons might not appear when you save.

If you are really new to HTML you can use the following bit of code as a guide for adding links with images.

"<img src="/images/sound.png" /> <a href="/category/listen">More Audio</a>" (without the quotes)

The previous bit of code should yield something that looks like the following:

 
Adding custom icons is something that you can accomplish without using any theme files. That's one of the great things about it. So if you'd rather not mess around with themes then consider this approach to help customize your site. If you're not too comfortable with the HTML associated with adding images I highly recommend reviewing the following IMG TAG tutorial.

 

 

Bookmark and Share Bookmark Post

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <span> <img>
  • Lines and paragraphs break automatically.
  • Images can be added to this post.

More information about formatting options