Link Icons

A partial screenshot of the services configuration page

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/X 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
X
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).