EverWeb Codebox logo

EverWeb Widgetbox 3

FA Icon Navigation

FA Icon Mobile Nav widget

Click Drop Font Awesome Icon Navigation

This version of the click to open icon navigation incorporates some user requested features...
Ability to change the style, size and icon in the button.
Switch the button to the right hand side.
More options for the list item icon.
The last two links can be configured as links to external pages with the option to open in a new window.
Due to the limitations of the EverWeb inspector window size and the large number of settings, the navigation can only have a maximum of 10 items.
See the Font Awesome Icon list to check out the options and get the individual icon codes.

FA Icon Navigation External Link New Window
FA Icon Navigation Widget

Widget Settings

Set the button size, background color and border width, color and corner radius.
Select the icon position in relation to the navigation menu - left or right.
Enter the icon code number and set its size, padding, color and line height.
The size, padding and line height are used to position the icon within the button.
Set the drop down navigation background color and the border width color and corner radius.
Set the list item font family, size, color and padding.
Set the list item separator color and height. Set the height to zero if the separator is not required.
Enter the list item icon code number and set its size, color and position.
Enter the link text and select the Link to: page for the first three items.
Add further items and check the box to display them.
Use the last two items for internal links by entering a relative file path or to an external page or file using an absolute file path.
Find out about File Paths.
Check the box if the link is to open in a new window.
Finally, use the Arrange menu to bring the navigation menu to the front of other objects and uncheck the "Show Navigation" box.

This widget is included in the Navigation-2 widget pack.