Kadence Tutorial: A Detailed Guide to Customizing SVG Icons with Kadence Blocks Pro

Kadence Blocks Pro Provides a variety of ways to help users use customization in their websites SVG Icons. From theaesthetics,performancesneverthelessTechnology ScalabilitySVG icons can play an important role. This article describes how to add custom SVG icons using Kadence Blocks, covering several common methods.

SVG and Security/Support

SVG(Scalable Vector Graphics) is a widely used icon format that can beResize without distortion. While it has a great deal to offer in terms of design, the WordPress You need to be concerned about security when using SVG in the SVG format, which is based on the XML and therefore may hide malicious code. Please note the following when using SVG icons:

• safety risk: The SVG format may embed malicious scripts and should be used with caution.
• source (of information etc): Try to use your own created SVGs, and if you use third-party icons, be sure to choose a reliable source.
• Icon size: 24x24px SVG is recommended, which is the standard size for Kadence Blocks.
• scanning: Before uploading SVG icons, it is recommended that they be scanned to ensure there are no potential security issues.

If you want to control the icon color, it is recommended to use the Fill icon, because the Stroke icon cannot adjust the color directly.

Add custom icons using the built-in icon manager

Kadence Blocks Provides an easy icon manager that allows users to directly upload and use customized SVG Icons. Here are the exact steps:

• Open the icon selection drop-down menu
  In Icon Settings, click on the icon selection drop-down menu to enter the icon management interface.

• Upload a custom SVG
  Under the My Icons tab, click the plus icon and select Upload Custom SVG File.

• Security tips
  When uploading, the system will remind to check SVG Are the files cleaned up and conform to the size requirements (24x24px).

• Pasting SVG Code
  If you have the SVG code on hand, click "Paste your SVG code" text box, just paste the code directly.

• Finish uploading
  Once the upload is complete, the icon will be displayed in the "My Icons" tab, you can select and use the icon.

• Delete icon
  If an icon is no longer needed, hover over it and click the red X Delete.

Convert SVG Stroke to Fill

Kadence Blocks Control the color of the icon by filling it with a color. If your SVG The icon uses a stroke instead of a fill, and the color settings will not take effect. Therefore, it is recommended to convert the stroke icon to a fill icon.

Conversion method
SVG stroke icons can be converted to fill icons using an online tool. After conversion, the appearance of the icon does not change, but its properties change so that the colors can be controlled by Kadence.

• Stroke icon: These icons are usually defined by an outline and must be converted to fill icons before they can be modified by Kadence color settings.

• Fill Icon: It is a solid graphic that allows you to control the color directly without conversion.

Using the Kadence Icon Search Function

Kadence An icon search function is provided to facilitate users to search and import other available custom icons. The steps to use this feature are as follows:

• Open the icon selection drop-down menu
  Again, click on the icon selection drop-down menu in Icon Settings to access the Icon Management screen.

• Search Icons
  In the pop-up window, click "look for sth." tab, enter the icon name and the system will display the relevant icon.

• Select and add icons
  Once you have found the desired icon, click the "Add" button in the lower right corner to add it to the list of custom icons.

• Load more icons
  If you don't find the right icon, you can click "Load More" button to see more icon options.

Adding Custom Icons with IcoMoon Fonts

IcoMoon is a free tool that allows the user to convert SVG Icons are converted to font files. Below is a list of fonts that can be converted to fonts using the IcoMoon Steps to add a custom icon for the font method:

• Select icon
  exist IcoMoon On the website, upload or select the SVG icon you want to use.
• Generate Fonts
  After selecting the icon, click the "Generate Font" button.

• Download Font Files
  Download the generated font file.

• Uploading font files
  Unzip the downloaded file and find the .json file, and then go to the Kadence Control Panel, navigate to Kadence Blocks > Custom Icons, and upload the .json Documentation.

• Selecting and using icons
  After the upload is complete, your icons will be imported KadenceYou can use them as you would any other Kadence icon.

summarize

Kadence Blocks A variety of methods are provided to help users easily use customization in their websites SVG Icons. Use the built-in icon manager, the icon search function, or use the IcoMoon Convert SVG Icons to Fonts, you can all choose the right method according to your needs. Using these methods, you can easily add personalized icons to your website to enhance the beauty and functionality of your page design.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off