EverWeb Widgets

Social Media Links

The widgets are used to create social media links using either Font Awesome or Socialise icons. The links are combined to create various styles of navigation menu.
Font Awesome Icons
The font awesome icons are loaded either by referencing the CDN stylesheet or inserting a personal ID in the Font Awesome javascript.
Each widget has a link which opens the Font Awesome Cheatsheet to make it easy to find icons and get the icon name to copy and paste into the widget settings. See the instructions for more info.
Social Icons
Each widget has a link tab which, when clicked, downloads a folder with twenty five Social icons. These are then dragged onto the Assets List in the widget settings panel to create the links.
Click any widget icon to see the demo …

View CartAdd To Cart

Responsive Font Awesome Links

The links form a vertical navigation using Font Awesome icons when viewed on computers with Font Awesome icons. The individual links animate on hover. The navigation can be fixed if required.
On mobile devices, the navigation becomes horizontal and sticks to the bottom of the device window. Media queries are used to switch the style and CSS calc is used to set the tabs to a percentage width.

FA Horizontal Navigation

A horizontal navigation with variable opacity background and link tabs with Font Awesome icons. The navigation can be fixed in position at the top or bottom if required.
The links can have a title attribute which shows on hover if required and can open in a new window. There are options for an email/share link and a smooth scroll, back to the top function.

FA Fade In Navigation

The navigation is similar to the FA Horizontal navigation and has the same basic functions for adding and styling the links including individual icon colors.
This version of the navigation is invisible on page load and fades in at or near the top on scroll. There are settings for scroll distance, fade time and distance from the top.

FA Fade Out Navigation

The navigation is similar to the FA Horizontal navigation and has the same basic functions for adding and styling the links including individual icon colors.
This version of the navigation appears at or near the bottom on page load and disappears on scroll to allow the bottom content and footer to be seen.

FA Slide Out Links

On page load, the tab with a share icon appears stuck to the left of the browser or device window at a preset distance from the top.
It slides out on click to reveal link tabs with Font Awesome icons. The icons have a scale animation on hover when the page is viewed on computers.

Social Genie

The social icons sit on a transparent platform and scale up from the bottom on hover like an OS X style dock.
The icons show a title on hover when viewed on a computer or laptop.
When viewed on a tablet device, the icons scale up with one tap and show the title. Another tap will open the linked page.

Social Icon Navigation

The horizontal navigation can be placed anywhere or made to stick at a preset distance from the top or bottom of the browser window. The icons are from the social icon set which can be downloaded in the widget settings.
The icons have a hover animation and the navigation background color can have its opacity adjusted.

Social Icon Fade In

The navigation uses the social icon set and is designed to fade in on scroll once the header has scrolled out of sight.
The icons can be download from the widget settings panel and have a hover animation.
The navigation background can be a solid color or have its opacity reduced to zero if necessary for complete transparency.

Social Icon Fade Out

The navigation uses the social icon set and is designed to fade out on scroll near the bottom so that the footer can be seen. The icons can be download from the widget settings panel and have a hover animation.
The navigation background can be a solid color or have its opacity reduced to zero if necessary for complete transparency.

Social Icon Scroll & Fix

The navigation uses the social icon set and is designed to scroll up the page with the rest of the content and then stick at a preset distance from the top of the browser or device window.
The icons can be download from the widget settings panel and have a hover animation.
The navigation background can be a solid color or have its opacity reduced to zero if necessary for complete transparency.

Social Icon Slide Out Links

The share tab sits at the browser left at a preset distance from the top. The icon links slide out on click. The icons are from the social icon set which can be downloaded in the widget settings.
The navigation background has an opacity control and the icons can have a box shadow on hover.

© EverWeb Widgets -