Icons become more and more popular in website design. They can be used for example as decorations or buttons linking to social media. In WebWave - responsive white label website builder - users can use a few hundreds of icons with SIL OFL 1.1. license, which means they can use them for free for both personal and commercial purposes.
Add an icon
An icon can be added through the menu on the left side of the builder. Select smiley face emoji and drag and drop it on a website.
When you add a new Icon to a website, you will see a list of icons. Pick an icon of your choice, change the color in the preview window on the right and press the green button Select.
Icon settings
After adding an icon, click on it and it the Settings Panel set its attributes:
Click action (link)
After choosing "Click action" you will be able to make a linked button out of the icon and transfer a user to a website of your choice. This effect is often used for example to link company logo to its website. You can set a link to:
- None (default) - nothing happens after clicking an image.
- Webpage - opens your website's subpage
- Go to newspage - opens a certain article.
- Go to object on page - website will be dynamically scrolled down to a certain element on the subpage.
- Website address - opens a website with a certain site address.
- Perform interaction - show or hide elements.
- More:
- Open URL address - opens a website with a certain URL address.
- Call phone number - runs default calling application like Skype on the user's computer or telephone dial on a mobile phone and automatically dials the number of your choice.
- Send e-mail - opens default mailbox application like Mailbox (Windows 10) on the user's computer or Gmail on users mobile phone and automatically puts e-mail address of your choice.
- Open file from media library - opens file form media library.
Image settings
In "Image settings" you can set:
-
Color - Set icon color.
- Crop type :
- Cover (default) - Image is proportionally rescaled and fully fits the frame. Top, bottom or side image boarders can get cropped.
- Contain - A whole image is proportionally rescaled. There might be left some blank space in the frame.
- Stretch - Image is rescaled but not proportionally. It fully fits the frame.
- Original size- Image is not rescaled - it is in the frame in the original size.
- No image compression- Turn off automaticall image compression.
- Ken Burns Effect - Turn on Ken Burns Effect.
- Scrolling speed - Turn on Parallax Effect.
Image description and SEO
In image description you can set:
- Image title for SEO - set a title which is displayed when a mouse cursor is on the image.
- SEO image description (ALT) - set a text which will appear when an image can't be displayed. ALT is important in website positioning.
More about positioning read here.
Change icon
To change the icon, click on the element and select cogwheel icon "More actions" and "Edit content" or enter the Settings Panel and click on "Edit content". Pick a new icon and confirm your choice with a green button Select.
Icon
This website has been entirely created using our web design software WebWave. We use cookies to give you the best possible experience. Read more.
FIND US ONLINE
HELP DOCS
WEBWAVE
FOR CUSTOMERS
OFFER
WEBSITE BUILDER
Click here to chat with us.
CONTACT
contact@webwave.me
Free website builder WebWave makes creating websites effortless. You can start building your website either from scratch with a blank page or, if you are looking for some inspiration, with a free template. Web design software for free? It is easy!