Shortcode
Using the 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. |
| 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