How to Use

How to Use the 4K Icon Fonts for Visual Composer?

This is a simple guide for beginner users of 4K Icon Fonts Plugin.

Using Visual Composer

Step 1. Add New Page or Edit your existing page.

Step 2. Go to Backend Editor

Step 3. In your Backend Editor, click on the Plus Button or Add Element. First, add a row.

Step 4. When you add a Row, You can click the Plus Button in the Row to add our Plugin Components. Choose the options that you may find applicable.

Step 5. Save your changes and Publish your work. Well done!

Using as Shortcode

You can use the 4k_icon shortcode inside your content if you want a more customized experience. With this you can place your icons anywhere.

Parameter	Default	Type	Description
icon		string	The name of the icon to display. Since there are a ton of icons, it might be better to use the 4K Icon element in VC to find the icon you’re looking for since there’s a search function there.
icon_color	#3498db	string	The color of the icon
icon_size	50	number	The size of your icon in pixels
shape	none	string	The background shape of the icon. Values can be: none, circle, square or rounded.
shape_type	solid	string	The type of background shape for your icon. This is only applied when there are no hover effects. Values can be: solid, button, thin-border or thick-border
border_radius	8	number	The border radius of the background shape in pixels. Only applies for rounded shaped icons.
title		string	Icon title attribute - When the 4K icon is highlighted, the text you will input here will appear.
link		url	Enter a URL here to make your icon a link.
link_new_window		string	Put new_window here to open the link above in a new window
float	none	string	The float rule of the icon, values can be: none, left or right
overflow_next		string	If the next content box is a single text block, you can put overflow this field in order for the icon to occupy the whole height (not like when floated). This only applies when you have the float field set to left or right
margin	20	number	The margin in pixels. By default this margin will be placed on the bottom of your icon. If floated left or right, this margin will also be used on the side the icon meets your content
extra_class		string	You can add an extra class name to this icon. Useful if you want to add custom CSS styles to it

If you are using an icon shape other than outline, you can use these other parameters

Parameter	Default	Type	Description
shape_color	#dddddd	color	Pick a color for your icon’s background shape.
shape_size	60	number	The size for your icon’s background shape in pixels.
hover_effect	none	string	The hover effect to play when the mouse hovers over the icon. These changes are usually not available in VC’s frontend editor. The values can be: none faint-circle – Faint background shape that solidifies on hover with an outline solid-outline – Solid background shape that gets smaller when hovered on and shows a border flip-vertical – Solid background shape, that flips vertically when hovered with inverted colors flip-horizontal – Solid background shape, that flips horizontally when hovered with inverted colors swipe-down – Solid background shape, icon swipes down on hover and gets replaced with inverted colors swipe-up – Solid background shape, icon swipes up on hover and gets replaced with inverted colors swipe-left – Solid background shape, icon swipes left on hover and gets replaced with inverted colors swipe-right – Solid background shape, icon swipes right on hover and gets replaced with inverted colors fill-up – Outlined background shape that gets filled up from the bottom when hovered border-solid – Border background shape that gets filled up from the edges when hovered border-thick – Border background shape that gets smaller with another thicker border when hovered
hover_on	icon	string	Choose the element which would trigger the hover effect. You may need to play around this value depending on your hover effect since some may have additional containers for the effect. (Changes may not be visible in the frontend editor). Values can be: icon, parent, parent2, parent3, or parent4Only applies for ‘faint-circle’, ‘solid-outline’, ‘solid-outline2’, ‘flip-vertical’, ‘flip-horizontal’, ‘swipe-down’, ‘swipe-up’, ‘swipe-left’, ‘swipe-right’, ‘fill-up’, ‘border-solid’, ‘border-thick’ hover effects

Example:

[4k_icon icon="lp-eject" icon_color="#dd3333" shape="circle" hover_effect="faint-circle" title="Sample Icon Title" link="http://google.com" link_new_window="new_window"]