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.
|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
|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:
|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|
[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"]