Link icon preview
Link icon widget and format settongs

The Link icon module is a simple link field formatter to create icon classes based on a predefined set of link titles.

Link icon is an icon-agnostic formatter, meaning it doesn't care for whatever icon you use. Any icon will simply work. It doesn't hard-code icon names, nor creates a new field type, nor includes icons.

Link icon is an entity-based field formatter, like link.module, so once you are done with the Configuration, be sure to visit the assigned entity URL, e.g.: node/1/edit, or user/1/edit, or inform your members/editors, to add the actual icons at those URLs.

Features

  • Predefine allowed titles. Adding or removing more icons is as easy as adding another line of key|value pairs to the allowed titles.
  • Optional icon API, and fontawesome modules integration.
  • Optional simple stylings: pure CSS tooltip, square, rounded and base colors, or disable it from outputting CSS, if you care to DIY. It's just starter anyway.
  • Easier to theme, options to display or hide text, icon fonts CSS file, and a few other.
  • And of course, link module own virtues as a field, such as effortless integration with any fieldable entity, OG, or Views.

Extending

  • Use Views to place it as blocks with contextual filter by node/user ID from URL.
  • For sitewide social links, an idea is to put the links into admin account field, and use Views to make them as sitewide block. Or any node ID if using some Team content type containing member social links.
  • This module doesn't support social share, although with tokenized URL may help simple share, it is recommended to use a specialized module for such purpose.

Usage examples

  • To create member/author social links for community-driven sites where you want to control what links are allowed,
  • To create a set of supported social links for team/author members so they can put their own links without breaking the design, nor your intervention on the fly,
  • Apart from social icons, any static iconized link will do, e.g.: View website, Try now, Buy now, Demo or other Hello there links. You can make them available once for editor selection within a single multi-value field.

Usage/Configuration

Two important places to visit in the correct orders:

  • Manage fields
  • Manage display
  1. Enable this module and its dependency, link.module
  2. At admin/config/people/accounts/fields, or Content types -- click "Manage fields". Create a multi-value link field, make sure to choose "Predefined title" and input your key|value pairs of titles where key is the icon name (without prefix), and value title.  If you have an icon named "icon-facebook" or "fa-facebook", write, e.g.: 
    facebook|Visit my Facebook page
    twitter|Twitter
    google-plus|Google+|[node:title]
    linkedin|Linkedin
    pinterest|Pinterest
    vimeo|Vimeo
    youtube|Youtube
    

    Avoid hardcoding icon name "prefixes" here. The prefix is defined at Display formatter so that you are not stuck in database when the icon vendor change prefixes from "icon-" to just "fa-", etc. Make sure the icon name is available at your icon set.

  3. At admin/config/people/accounts/fields, or Content types -- click "Manage display". Under "Format" of the active view mode, choose "Link icon, based on title".
  4. Click the "Configure" icon to have some extra options. There is option to hide text so to display the icon only, option to disable module from outputting CSS, if you want total DIY on theming, and a few other.

The configuration is ready, now visit the configured entity edit page, e.g.: node/1/edit, or user/1/edit, and add the links accordingly.

Download icon fonts from http://fontello.com or http://icomoon.io/app/. Place it somewhere (e.g.: sites/all/libraries/fontawesome), or use icon API import, and reference it either via this module Display formatter, or your theme, or loaded automatically if using fontawesome.module or icon API.

Requirements

- link.module should be enabled.

Related modules

Follow
https://drupal.org/project/follow
It adds sitewide and per user links that link to various social networking sites. The links reside in two blocks.

Troubleshooting

What to do when a vendor changes icon names, or my boss wants a different icon set?
Most online icon vendors provide a way to rename icons, just rename them to match the stored names.

Credits

This modules owes credits to Advanced link for the idea of Link title using select box. Due credits to them.

Project Information

Downloads