{"id":1506,"date":"2022-12-20T19:02:24","date_gmt":"2022-12-20T11:02:24","guid":{"rendered":"https:\/\/leadsleap.com\/blog\/?p=1506"},"modified":"2022-12-20T19:17:13","modified_gmt":"2022-12-20T11:17:13","slug":"page-builder-update-font-icon-deprecated","status":"publish","type":"post","link":"https:\/\/leadsleap.com\/blog\/page-builder-update-font-icon-deprecated\/","title":{"rendered":"Page Builder Update &#8211; Font Icon Deprecated"},"content":{"rendered":"\n<p>We have just completed another round of updates in our Page Builder.<\/p>\n\n\n\n<p>Most of the updates are subtle.<\/p>\n\n\n\n<p>For example, all the elements can now be rotated. Background and SVG Icon elements can now be skewed.<\/p>\n\n\n\n<p>But there is one important update I want to highlight &#8211; Font Icon is now deprecated.<\/p>\n\n\n\n<p>It is replaced by SVG Icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"477\" height=\"185\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/font2svg.jpg\" alt=\"\" class=\"wp-image-1507\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/font2svg.jpg 477w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/font2svg-300x116.jpg 300w\" sizes=\"(max-width: 477px) 100vw, 477px\" \/><\/figure>\n\n\n\n<h2>Why Replace Font Icon With SVG Icon?<\/h2>\n\n\n\n<h3>1) More shape\/icon can be added<\/h3>\n\n\n\n<p>Using Font Icon, we have to rely on FontAwesome plugin. If a shape or icon is not available, there is nothing we can do.<\/p>\n\n\n\n<p>Using SVG Icon, the sky is the limit. We can create any shape or icon we want.<\/p>\n\n\n\n<p>For example, with SVG Icon, you can now easily create an opt-in form like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"800\" height=\"501\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/svgform.jpg\" alt=\"\" class=\"wp-image-1508\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/svgform.jpg 800w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/svgform-300x188.jpg 300w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/svgform-768x481.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<h3>2) SVG icon can be resized with no constraint to aspect ratio<\/h3>\n\n\n\n<p>When resizing a Font Icon, the aspect ratio must be fixed. See the illustration below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"448\" height=\"325\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/fonticon.gif\" alt=\"\" class=\"wp-image-1509\"\/><\/figure>\n\n\n\n<p>But there is no such limitation in SVG icon. See the illustration below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"448\" height=\"325\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/svgicon.gif\" alt=\"\" class=\"wp-image-1510\"\/><\/figure>\n\n\n\n<h2>How To Convert Font Icon to SVG Icon?<\/h2>\n\n\n\n<p>If you have used any Font Icon element in your page, you will now see the word (Deprecated) in the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"478\" height=\"276\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/deprecated.jpg\" alt=\"\" class=\"wp-image-1511\" srcset=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/deprecated.jpg 478w, https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/deprecated-300x173.jpg 300w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/figure>\n\n\n\n<p>Don&#8217;t worry. Your icon is still working. Your page is still working too.<\/p>\n\n\n\n<p>But it is advisable that you replace it with SVG icon asap.<\/p>\n\n\n\n<p>The replacement process is very simple.<\/p>\n\n\n\n<p>1) Click on the icon to open the icon editor<\/p>\n\n\n\n<p>2) Click &#8216;<strong>Auto Replace Now<\/strong>&#8216; button <\/p>\n\n\n\n<p>3) Adjust the size and position if necessary. <\/p>\n\n\n\n<p>See the demo below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"818\" height=\"441\" src=\"https:\/\/leadsleap.com\/blog\/wp-content\/uploads\/2022\/12\/replace.gif\" alt=\"\" class=\"wp-image-1512\"\/><\/figure>\n\n\n\n<p>That&#8217;s all for today&#8217;s update.<\/p>\n\n\n\n<p>The new SVG icon is just the beginning. <\/p>\n\n\n\n<p>It is going to pave the way to a new feature that we are still developing.<\/p>\n\n\n\n<p>Look forward to it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have just completed another round of updates in our Page Builder. Most of the updates are subtle. For example, all the elements can now be rotated. Background and SVG Icon elements can now be skewed. But there is one important update I want to highlight &#8211; Font Icon is now deprecated. It is replaced [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[237],"tags":[],"_links":{"self":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1506"}],"collection":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/comments?post=1506"}],"version-history":[{"count":8,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1506\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/posts\/1506\/revisions\/1521"}],"wp:attachment":[{"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/media?parent=1506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/categories?post=1506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leadsleap.com\/blog\/wp-json\/wp\/v2\/tags?post=1506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}