Dashboard
Site & Funnels
Products
Orders
Contacts
Analytics
Marketing
Sales
Settings
Apps
Payments
MessageHub
This article will talk about the Icon Settings included in the Icon element. This set of settings allows you to style your icons, which are design elements that allow users to add graphical icons to their pages. Adding style to your icons can make your page more visually appealing to your audience.
Requirements:
- An active ClickFunnels 2.0 account
- A Clickfunnels page
- An Icon element
TABLE OF CONTENTS
Icon Picker
The Icon Picker feature lets you select an icon from our free wide gallery that includes popular web signs, social media sites logos, and useful signaling for your pages.
Example:
You can see a “Bitcoin” icon added to a section and a Headline to better communicate our idea.
Link Action or URL
The Link Action or URL feature lets you add a hyperlink to your icon. You can add internal link actions like “#submit-form” to submit your checkout or opt-in form or add a website link, and as soon as your customers click on that icon, they will be redirected to whatever location your link is pointing to.
Example:
By typing the Google URL, if a customer clicks on the icon, they will be taken to Google’s main page.
Icon Size
Set the icon size for desktop and mobile viewing here. Click the “chain” icon to set font sizes independent of the other view.
Example:
Setting the Icon Size to 72 px in this example will change the size of your icon in Desktop and Mobile. You can see the changes in real-time to your left.
Align
Select the alignment of the icon within the element box, left margin, centered, or right margin alignment.
Example:
Changing the alignment to the right will change the icon alignment in real-time, as you can see in the image below.
Icon Color
The Icon Color feature allows you to add your desired color to the icon shape.
Example:
By changing the Icon Color to blue, it will automatically reflect in our element, as you can see in the image below.
Opacity
Opacity will allow you to set the transparency of the text from invisible to full strength.
Example:
By moving the Opacity bar to the left, it will reduce the intensity of the color and start adding transparency, as you can see in the image below.
Supported Elements:
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article