RSS Feed Icon from Font Instead of Image (PNG) with Drupal 7

As written in a post before, I customized the Drupal RSS feed icon by replacing it with my own PNG icon. Unfortunately, the PNG icon should be designed well and is never scalable when using pixels. Therefore, I wanted to change it to a font based (vector) icon using again free fonts from font squirrel.

I chose the ‘Web Symbols’ font, which includes several other nice icons, I’d probably use in the future. For the RSS feed icon, there exist two icons, the positive ( B ) and the negative ( r ) one.

I decided to use the negative one, which is addressed by the character r. Therefore, I change the function nesono_feed_icon as follows:

function nesono_feed_icon($variables) {
  $text = t('Subscribe to @feed-title', array('@feed-title' => $variables['title']));
  if ($image = theme('image', array('path' => drupal_get_path('theme', 'nesono') . '/misc/feed.png', 'width' => 16, 'height' => 16, 'alt' => $text))) {
    return l('r', $variables['url'], array('html' => TRUE, 'attributes' => array('class' => array('feed-icon'), 'title' => $text)));
  }
}

Then, I downloaded the @font-face kit from Font Squirrel and added the definition to my CSS (simply compiled the contents of the shipped CSS file into my main CSS).

Then, I changed the font-family of the feed character surrounding tag to WebSymbols and that’s it again :)

Best,
iss