Full Width Responsive CTA Links

Responsive Fontawesome Icon CTA Links

These CTA links can incorporate any of the Fontawesome icons. The individual icons are adjustable for size and color.
The hyperlinks can be to an internal or external page and open in a new window if required.
The full list of Fontawesome icons and their names can be found on the web. Clicking any of the CTAs below will show an icon category on the W3SCHOOLS website. Check out the sidebar of any page to see the links to other categories.

Font Awesome CTA Link Button Widget

Widget Settings

Check the "Full width" box in the Metrics inspector and set the module container maximum width, the CTA button width and button maximum height.
Set up each of the hyperlinks by entering the icon name.
NOTE: The format for the icon name is "fa-icon-name".
Check the box for animation if required and set the icon size and color.
Enter the text and choose the "Link to:" page
For an external link, check the box and enter the URL.
Check the box to open either type of link in a new window.
Adjust the vertical position of the icon and the text if required.

Full Width CTA FA Icon Widget
Full Width CTA FA Icon Widget

Font Styles

Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
Set the font size and color.
If the text extends to two or more lines by using line breaks <br>, adjust the line height.

Button Styles

Set the background color and adjust the opacity.
Set the border width, color and radius if required.
Set the box shadow color and radius if required.

Fix Or Fade On Scroll

The modules can be fixed when used with a slide over layer by checking the "Fixed Position" box in the Metrics inspector.
For fade on scroll, check the box and enter the scroll amount.

EverWeb Widgets | Full Width

This widget is included in the Full Width widget pack.