Link Icons

The Link Icons module is a field formatter for the Link field to display an icon for the service being linked to - ex. Facebook, Twitter or LinkedIn, with various display options available as settings of the formatter. The icons themselves are provided from the Font Awesome project. This project is now available for Drupal 8 and Drupal 9!

Services/icons currently supported, via the Link Icons Brands sub-module, are:


* 500px
* Acast
* Airbnb
* Amazon
* AngelList
* Apple
* Audible
* Bandcamp
* Behance
* Bitbucket
* Blogger
* Codepen
* Dailymotion
* Delicious
* DeviantArt
* Digg
* Dribbble
* Dropbox
* Drupal
* eBay
* Etsy
* Facebook
* Flickr
* Font Awesome
* Foursquare
* freeCodeCamp
* Grav
* Github
* Google
* Google Chrome
* Google Drive
* Google Play
* Google Plus
* IMDb
* Instagram
* iTunes
* Joomla
* JSFiddle
* Kickstarter
* last.fm
* LinkedIn
* Linode
* Medium
* Meetup
* Mixcloud
* Napster
* Paypal
* Periscope
* Pinterest
* Product Hunt
* Quora
* Ravelry
* Reddit
* Sellcast
* Skype
* Slack
* Slideshare
* Snapchat
* Soundcloud
* Spotify
* Spotlight (removed from 8.x version - see release notes)
* Stack Exchange
* Stack Overflow
* Steam
* StumbleUpon
* Telegram
* The Talent Manager (removed from 8.x version - see release notes)
* Tripadvisor
* Tumblr
* Twitch
* Twitter
* Viadeo
* Vimeo
* Vine
* Wikipedia
* WordPress
* WPExplorer
* Xing
* Yahoo
* Yelp
* YouTube

A navy generic globe icon is used if a link URL does not have one of the hostnames above.

Requirements The link field module, obviously, and the Font Awesome Icons module (7.x-2.6 or above/8.x-2.x) that adds the Font Awesome project to Drupal allowing the icons to be displayed.

Don't forget to add/upgrade to the latest version of Font Awesome in your sites/all/libraries/fontawesome directory.

Installation Install as usual (Drupal 7). Optionally from version 8.2, enable the link_icons_brands sub-module, to import service configurations for many online brands that have Font Awesome icons.

Configuration Just head to a content type display management tab (ex. http://yoursite.com/admin/structure/types/manage/yourtype/display) where you have a link field/fields. In the format column for the link field that you want to use this formatter, select the 'Service icon (with options)' format and save the form to put it into use.

Click the settings cog/gear button to view and edit the (hopefully) self-explanatory options for how the links should be displayed. These exploit most of the Font Awesome features.

To customise the icons further, just theme your pages as usual. With the icons rendered as text characters using Font Awesome, you can style them with CSS as you wish.

From version 8.2/2.2, to customise which hostnames result in which icons being used (including the colour, HTML class and more), use the services configuration page (ex. http://yoursite.com/admin/config/search/link_icon_services) to add, modify and remove service configurations. See the module help page for explanations of each service configuration field (ex. http://yoursite.com/admin/help/link_icons).

Thanks Thanks to Honza Pobořil (Bobík) who published a sandbox project which was the starting point for this module.

The icons are from the Font Awesome project, by Greg Loucas and Dave Gandy.

The font has been made available to Drupal in the fontawesome module by Rob Loach (RobLoach) and Inder Singh (inders).