Responsive Font Awesome Social Media Links
By default the widget references the V4.7.0 stylesheet. This can be user updated as newer versions become available.
Click HERE to register and get the embed code. The code will look like this …
Copy the ID - marked in red - and paste it into the "Embed ID" box in widget settings.
Creating The Links
In this application, the EverWeb Widget API Assets List is modified to create a list of links rather than a bunch of images. For those who are not yet familiar with this, here's how it's done …
Click the "Add" button and an entry will apear with "Double click to edit".
Select this text and then add the data in the boxes provided.
Once the data has been entered, single click the item in the list and it will become editable. Enter a suitable name for the link.
Repeat as necessary.
Click the "Open Cheatsheet" tab in the widget settings to open the list of icons in the browser. Find the required icon and copy the code which has fa- followed by the icon name like this …
The icon background color is set by either entering the color name as text or using a hex color number.
Color names are just that: red, orange, green, blue, black and so on …
To find a hex color number, open the color window, select the Color Wheel tab and set the color.
Open the Color Sliders tab to get the Hex Color Number. The number should be entered and preceeded by the hash (#) sign like this …
Enter the absolute URL to the social media site or relevent page and check the box if the link is to open in a new window.
There is an option to add an email link with fields for email address, subject and content. The link can be set up with the website email address and subject for visitor feedback or as a way for visitors to email a friend.
In the latter case, the email field is left blank and the subject line entered as something like "Check Out This Web Page"
The content field can have the URL of the web page. It will appear as text on the email but will be converted to a clickable hyperlink at the receiving end.
The navigation switches from a vertical stack of links at the left browser edge when viewed on computers to a horizontal row of tabs on mobile devices. If viewing this page on a computer, reduce the browser width to see the change.
The total number of links needs to be entered so that the percentage width of each can be set for mobile use.
The break point at which the switch takes place is adjustable and can be set for tablet in landscape mode - 1059px, tablet in portrait mode - 799px or mobile phone - 599px.
The navigation can be made sticky when viewed on computers by checking a box and entering the distance from the top of the browser.