The widgets shown here use the Font Awesome icons to create a responsive row of links. Font Awesome is probably the best known and most used icon set and offers literally 100s of icons. Font icons are far better than PNG images for creating icons on responsive web pages since there are no images to download. This results in faster page download times.
The icon links shown above are created using the Responsive FA Links widget. The icon links are inserted using the EverWeb widget API Assets List and can accomodate up to 48 links. On narrower devices, the links will return to a send or third row if there are enough of them.
Items are inserted by clicking the "Add" tab, highlighting the entry in the list and adding the data.
IconsThe widget has a tab which opens the Font Awesome cheatsheet. The required icon name can be copied from this and pasted into the Icon field.
Icon BackgroundThe tab background color is entered using a hex color number - without the hash (#) sign. To get a color number, open the color window, select the color, open the RGB Sliders pane, copy the color number and paste it into the widget settings.
Title On HoverIf this function is turned on in the widget settings, the text entered in the Title field will be shown on hover when the links are viewed on a computer or laptop.
File PathInternal or external links are created by entering a relative or absolute file path into the URL field and these can be configured to open in a new window if required.
Share LinkThere is an option to insert a "Share This" link. When clicked, this opens the vistors email client and it has options to insert the email subject and content.
The URL to the page can be inserted into the content section. This appears as text in the email but will be a clickable link at the receiving end.
Icon StylesThere are controls for adjusting the link size, the icon size and color and the horizontal spacing of the tabs. The tabs can have rounded corners or, by checking a box, can be made completely round.
There is option to set a box shadow on hover for when the page is viewed on a computer.
Container StylesThe container background and its opacity can be set as well as the vertical spacing.
The Font Awesome Tabs widget has all the same functions as the links except it creates CTA style tabs which can be styled to match any other CTA links on the page.
Tabs Per RowThe tabs have fixed height and a responsive width. The width of the tabs will depend on the number of tabs per row on each device type. There is an overall maximum width setting which will control the spread of the tabs when viewed on a computer.
TabsThere are controls to adjust the tab height, the icon size and color and the border radius. The background colors are set up in the same way as described for the FA Links above.