How to Use - 12K SVG Icons for WPBakery Page Builder

How to Use 12K SVG Icons for WPBakery Page Builder

This is a simple guide for beginner users of 12K SVG Icons plugin.

Basic Usage

There are two ways to use 12K SVG Icons plugin in your page: using WPBakery Page Builder or by using Shortcodes. Please do note that if you want the 12K SVG Icons settings to appear, you need WPBakery Page Builder. Otherwise, you have to use the shortcode to make the plugin work.

Using WPBakery Page Builder

Please do note that before we proceed on this guide, the user also needs a basic knowledge on how to use WPBakery Page Builder and how to add Rows and Elements in a page or post. If you're not sure on how to do the following steps, it will be best to refer on the WPBakery Page Builder Basic Tutorial first: https://wpbakery.com/video-tutorials/

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. Customize the settings according to your preference. Additional description on each setting and option are included in the settings.

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

Using the Shortcodes

You can use the svg_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 12K Icon element in VC to find the icon you’re looking for since there’s a search function there.
icon_color
#9b59b6
string
The color of the icon.
icon_size
40
number
The size of your icon in pixels.
bg_shape

string
The background shape of the icon. Values can be: none, circle, square, rounded, circle-outline, square-outline or rounded-outline.
custom_svg
8
string
If you want to use your own SVGs, paste the whole SVG code.
link

url
Enter a URL here to make your icon a link.
css_animation

string
Select type of animation for element to be animated when it “enters” the browsers viewport.
float
none
string
The float rule of the icon, values can be: none, left or right.
force_color

string
Check this to force our own color (this may affect multi-colored icons, and may not work with some icons).
el_class
20
number
Style particular content element differently – add a class name and refer to it in custom CSS.
css

string
You can add an extra class name to this icon. Useful if you want to add custom CSS styles to it.
bg_color #bdc3c7
color The background color for your icon.

You can also use to svg_icon_button create your buttons with SVG Icons.

Parameter Default Type Description
title string The text of the button.
link url Enter a URL here to make your icon button a link.
style modern string The style of the icon button. Values can be: modern, classic, flat, outline, 3d, custom, outline-custom, gradient or gradient-custom.
shape rounded string The shape of the button icon. Values can be: rounden, square or round.
size md (Normal) string Select button display size. Values can be: xs (Mini), sm (Small), md (Normal) or lg (Large).
align  inline string Select button alignment. Values can be: inline, left, right or center.
icon_button awesome/wordpress string Choose an icon. Type in the text box above to search for a specific icon. Use the drop down above to filter or show icons from specific icon sets.
el_class string Style particular content element differently – add a class name and refer to it in custom CSS.
custom_onclick string Insert inline onclick javascript action.
css_animation string Select type of animation for button to be animated when it “enters” the browsers viewport.
custom_svg string If you want to use your own SVGs, paste the whole SVG code

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

Parameter Default Type Description
gradient_color_1 turquoise color The first color of gradient for your icon button.
gradient_color_2 blue color The second color of gradient for your icon button.
gradient_custom_color_1 #dd3333 color The first custom color of gradient for your icon button.
gradient_custom_color_2 #eeee22 color The second custom color of gradient  for your icon button.
gradient_text_color #ffffff color The button text color for your icon button.
custom_background #ededed color The custom background color for your icon button.
custom_text #666 color The custom text color for your icon button.
outline_custom_color #666 color The outline and text color for your icon button.
outline_custom_hover_background #666 color The hover background color for your icon button.
outline_custom_hover_text #fff color The hover text color for your icon button.
color grey color The icon button color.
button_block string Set full width of icon button.
i_align left string The alignment of your icon button. Values can be: left or right.
custom_onclick_code string
The onclick action code.

Notes: