{"id":287,"date":"2017-02-19T04:18:46","date_gmt":"2017-02-19T04:18:46","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=287"},"modified":"2025-03-05T12:59:46","modified_gmt":"2025-03-05T11:59:46","slug":"icon","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/icon\/","title":{"rendered":"Icon"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-7bdpb-cbf4d6d35de32b4531b08f448ac0d0ae\">\n#top .av-special-heading.av-7bdpb-cbf4d6d35de32b4531b08f448ac0d0ae{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-7bdpb-cbf4d6d35de32b4531b08f448ac0d0ae .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-7bdpb-cbf4d6d35de32b4531b08f448ac0d0ae .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-7bdpb-cbf4d6d35de32b4531b08f448ac0d0ae av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Icon<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-8er49z-b742702c55baef5af8c75e3cd4a34b57 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-858tqv-15de2a1eb6ee05a53f07051409d40de7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-7ye29b-3216a24668fc6558e628e6be2e2f33cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>It is much easier and faster for users to grasp information visually, than to read and process the information. Icons are lightweight and make it easy to effectively communicate visually with the users. Icon element allows you to display a single icon, either from the default icon font that comes with the theme or an icon based on a custom icon pack from <a href=\"https:\/\/www.flaticon.com\/packs\" target=\"_blank\" rel=\"noopener\">flaticon<\/a> or <a href=\"http:\/\/fontello.com\/\" target=\"_blank\" rel=\"noopener\">fontello<\/a> that you can upload from Enfold &gt; Import\/Export tab.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-s301z-ad9ffcafdd177376e161cbcb759e7205\">\n.av_font_icon.av-s301z-ad9ffcafdd177376e161cbcb759e7205 .av-icon-char{\nfont-size:40px;\nline-height:40px;\nwidth:40px;\n}\n<\/style>\n<span  class='av_font_icon av-s301z-ad9ffcafdd177376e161cbcb759e7205 avia_animate_when_visible av-icon-style-border avia-icon-pos-left mar-r avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><span class='av_icon_caption av-special-font'>Standalone Icon<\/span><\/span>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-7o9kcf-1b6c1421cf0670d87c7ed806042a731d\">\n.av_font_icon.av-7o9kcf-1b6c1421cf0670d87c7ed806042a731d .av-icon-char{\nfont-size:40px;\nline-height:40px;\n}\n<\/style>\n<span  class='av_font_icon av-7o9kcf-1b6c1421cf0670d87c7ed806042a731d avia_animate_when_visible av-icon-style- avia-icon-pos-left avia-iconfont avia-font-entypo-fontello av-no-color avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" data-avia-icon-tooltip=\"&lt;br \/&gt;\nDefault Icon&lt;br \/&gt;\n\"><\/span><\/span>\n<div  class='hr av-7loran-22f7c39ab2d207d0790aa9cfd8dbc23e hr-default  avia-builder-el-6  el_after_av_font_icon  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7dnhpr-402c9b13e2904b432dc55c99c1502b18 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Icon Settings<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-q4m3r-ea9ae3ec1e80e8ffe965dd76a4969a11 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Icon element settings allow you to select:<\/p>\n<ul>\n<li>Font Icon<\/li>\n<li>Icon Style<\/li>\n<li>Icon Caption<\/li>\n<li>Title Link?<\/li>\n<li>Icon Size<\/li>\n<li>Icon Position<\/li>\n<li>Optional Tooltip<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-73v6uf-bacc3e1a83ad88314a834e8d3d0ce679 hr-default  avia-builder-el-9  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6u91fb-da68b3d83d60be00737476dd96b0cadd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Shortcode<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-o30ev-92618e676cf4501b30ef0cba197daae7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Icon shortcode can be placed anywhere on the site where you can add text example: In the phone info section of the header, a phone icon shortcode can be added before the phone number. The Unicode for every icon is different. In\u00a0general, the shortcode for the icon is similar as shown below:<\/p>\n<\/div><\/section>\n\n<div  class='hr av-69xatz-9555e29d6a17db55ddf1e0f585d737c9 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-61f5zz-03ee7bcd0eae6f884401f4da7b99d0b0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-5w0vef-d38677e520bc855ef0b0e7b4d7b0e696 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5q5orz-96cd472cc8c00121a9b9bb67a1d5d87e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Default Icon<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5jd4rj-ba37d99e100b41ad77eb612cd26bd735 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Icon color can be set from the icon element pop-up options. To set a custom background color to the default icon use the following CSS code:<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-5flo7z-4f0208b349c13cbf3f0f5c634d9212ea\">\n.av_font_icon.av-5flo7z-4f0208b349c13cbf3f0f5c634d9212ea{\ncolor:#000000;\nborder-color:#000000;\n}\n.avia-svg-icon.av-5flo7z-4f0208b349c13cbf3f0f5c634d9212ea svg:first-child{\nstroke:#000000;\nfill:#000000;\n}\n.av_font_icon.av-5flo7z-4f0208b349c13cbf3f0f5c634d9212ea .av-icon-char{\nfont-size:50px;\nline-height:50px;\n}\n<\/style>\n<span  class='av_font_icon av-5flo7z-4f0208b349c13cbf3f0f5c634d9212ea avia_animate_when_visible av-icon-style- avia-icon-pos-left icon-default avia-iconfont avia-font-entypo-fontello avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue806' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><\/span>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-57oi0n-2708bc3efe3e764930566f46bfa1db99\">\n#top .hr.hr-invisible.av-57oi0n-2708bc3efe3e764930566f46bfa1db99{\nheight:30px;\n}\n<\/style>\n<div  class='hr av-57oi0n-2708bc3efe3e764930566f46bfa1db99 hr-invisible  avia-builder-el-14  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-51t1d3-9ef468f81e0df3f2456688d26c4434b8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS -  Icon default\r\n\/\/--------------------------------------*\/\r\n\r\n.av_font_icon .av-icon-char {\r\n\tbackground: #ff0000;\t\r\n\twidth: 75px;\r\n\theight: 75px;\r\n\tborder-radius: 75px;\r\n}\r\n.av_font_icon .av-icon-char:before {\r\n    top: 50%;\r\n    left: 50%;\r\n    transform: translate(-50%, -50%);\r\n    position: absolute;\r\n    color:#ffdd00;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-4x1z6n-bc0fb12c0ea4d80ace99ea58dfb69571 hr-default  avia-builder-el-16  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4r221b-edb6e14419fae5ea4a972dc549de13f2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Icon Caption<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4jd4wf-8173edcdf883fbf531bd70e0faeaf108 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>For a standalone icon with border and caption,\u00a0color can be set from the icon element pop-up options. To remove the border around the icon, or set a custom color to the icon element or caption use the CSS code provided below:<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-4eubsf-d487a84573f596f7425b7c494437339c\">\n.av_font_icon.av-4eubsf-d487a84573f596f7425b7c494437339c{\ncolor:#000000;\nborder-color:#000000;\n}\n.avia-svg-icon.av-4eubsf-d487a84573f596f7425b7c494437339c svg:first-child{\nstroke:#000000;\nfill:#000000;\n}\n.av_font_icon.av-4eubsf-d487a84573f596f7425b7c494437339c .av-icon-char{\nfont-size:50px;\nline-height:50px;\nwidth:50px;\n}\n<\/style>\n<span  class='av_font_icon av-4eubsf-d487a84573f596f7425b7c494437339c avia_animate_when_visible av-icon-style-border avia-icon-pos-left icon-standard avia-iconfont avia-font-entypo-fontello avia-icon-animate'><span class='av-icon-char' data-av_icon='\ue854' data-av_iconfont='entypo-fontello' aria-hidden=\"true\" ><\/span><span class='av_icon_caption av-special-font'>Call Today! 886 551 3345<\/span><\/span>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-47ptzr-e3c85b2960c06572d6cac48766f656b5\">\n#top .hr.hr-invisible.av-47ptzr-e3c85b2960c06572d6cac48766f656b5{\nheight:30px;\n}\n<\/style>\n<div  class='hr av-47ptzr-e3c85b2960c06572d6cac48766f656b5 hr-invisible  avia-builder-el-20  el_after_av_font_icon  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-42xnov-ccd6fb0a3c2aded0614aac15e5c616c1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS -  Icon Standard\r\n\/\/--------------------------------------*\/\r\n\r\n.av_font_icon .av_icon_caption {\r\n\tfont-family: 'Anton', sans-serif;\r\n\tfont-weight:200;\r\n\tcolor: #ed1c24;\r\n}\r\n.av_font_icon .av-icon-char {\r\n\tbackground: #ff0000;\t\r\n\tborder:none!important;\r\n}\r\n.av_font_icon .av-icon-char:before {\t\r\n      color:#ffdd00;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-3wz68n-eca769604d8f3bc525c22cc8e8e7e6b9 hr-default  avia-builder-el-22  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-dbx87-4987ce501b4bdd20911f5f0dd60d0371 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Adding your own Fontello or Flaticon Icons<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3kxoj3-f3a0139497bdfec178b0fa859ac277a3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Custom icon packs from <a href=\"https:\/\/www.flaticon.com\/packs\" target=\"_blank\" rel=\"noopener\">flaticon<\/a> or <a href=\"http:\/\/fontello.com\/\" target=\"_blank\" rel=\"noopener\">fontello<\/a>\u00a0can be added to Enfold to extend the icon library.<\/p>\n<ul>\n<li>Download the icon pack from one of the supported sites.<\/li>\n<li>Upload the icons via Enfold &gt; Import\/Export &gt;\u00a0Iconfont Manager<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4828\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/import-icons.png\" alt=\"\" width=\"1011\" height=\"659\" \/><\/li>\n<li>Finally,\u00a0<strong>save the changes<\/strong>. The new icons will be available in the advanced layout builder.<\/li>\n<\/ul>\n<\/div><\/section>\n<section  class='av_textblock_section av-3cwnfr-af3a522394c5fbf41a9a769876654351 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Watch the video on how to build, upload and use a custom font icon. It is actually pretty straightforward:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/75743285\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<\/div><\/section>\n<div  class='hr av-39nvqf-2543735e80dad105f1ce3c10d789fa3d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-l7ai85wo-e43a7c795d2b9f6174d3bcf1492cc67d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Download Fontello or Flaticon Icons included in Enfold demos<\/h3>\n<\/div><\/section>\n<div  class='flex_column av-17wsef-8b1f94d1ca791bdf7651e11cb5e740fd av_one_third first flex_column_div  '     ><div  class='avia-button-wrap av-l7aia419-b12991e950764887aeaac2f4337041ef-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aia419-b12991e950764887aeaac2f4337041ef\">\n#top #wrap_all .avia-button.av-l7aia419-b12991e950764887aeaac2f4337041ef{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aia419-b12991e950764887aeaac2f4337041ef .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/enfold-knowledgebase.zip'  class='avia-button av-l7aia419-b12991e950764887aeaac2f4337041ef av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold Knowledgebase Icons\"><span class='avia_iconbox_title' >Enfold Knowledgebase Icons<\/span><\/a><\/div><\/div>\n<div  class='flex_column av-10mc3j-713dafd9deedb7fd6f43c05ada329432 av_one_third flex_column_div  '     ><div  class='avia-button-wrap av-l7aicfmg-4ef6cbb982be1fdbda4d057f67e060c7-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aicfmg-4ef6cbb982be1fdbda4d057f67e060c7\">\n#top #wrap_all .avia-button.av-l7aicfmg-4ef6cbb982be1fdbda4d057f67e060c7{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aicfmg-4ef6cbb982be1fdbda4d057f67e060c7 .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/medical.zip'  class='avia-button av-l7aicfmg-4ef6cbb982be1fdbda4d057f67e060c7 av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold Medical Icons\"><span class='avia_iconbox_title' >Enfold Medical Icons<\/span><\/a><\/div><\/div>\n<div  class='flex_column av-xopmn-0a11b307d0b42068ad88b2f361041cc1 av_one_third flex_column_div  '     ><div  class='avia-button-wrap av-l7aj5f89-53dfbd7381053d8431a7f89694d9664b-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aj5f89-53dfbd7381053d8431a7f89694d9664b\">\n#top #wrap_all .avia-button.av-l7aj5f89-53dfbd7381053d8431a7f89694d9664b{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aj5f89-53dfbd7381053d8431a7f89694d9664b .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/lifestyles.zip'  class='avia-button av-l7aj5f89-53dfbd7381053d8431a7f89694d9664b av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold Lifestyle Icons\"><span class='avia_iconbox_title' >Enfold Lifestyle Icons<\/span><\/a><\/div><\/div>\n<div  class='flex_column av-ss7gn-c8f778e7a5056bb7005dcdb55de14486 av_one_fourth first flex_column_div  '     ><div  class='avia-button-wrap av-l7aic5od-e2e315573022f09257fe8fe1096bdcb6-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aic5od-e2e315573022f09257fe8fe1096bdcb6\">\n#top #wrap_all .avia-button.av-l7aic5od-e2e315573022f09257fe8fe1096bdcb6{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aic5od-e2e315573022f09257fe8fe1096bdcb6 .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/light.zip'  class='avia-button av-l7aic5od-e2e315573022f09257fe8fe1096bdcb6 av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold Light Icons\"><span class='avia_iconbox_title' >Enfold Light Icons<\/span><\/a><\/div><\/div>\n<div  class='flex_column av-jtebj-0a129b79a77869479703827702f76961 av_one_fourth flex_column_div  '     ><div  class='avia-button-wrap av-l7aibdky-6d32de3ff23034a9fc767ab4a43158ee-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aibdky-6d32de3ff23034a9fc767ab4a43158ee\">\n#top #wrap_all .avia-button.av-l7aibdky-6d32de3ff23034a9fc767ab4a43158ee{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aibdky-6d32de3ff23034a9fc767ab4a43158ee .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/flaticon-sports.zip'  class='avia-button av-l7aibdky-6d32de3ff23034a9fc767ab4a43158ee av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold GYM Icons\"><span class='avia_iconbox_title' >Enfold GYM Icons<\/span><\/a><\/div><\/div>\n<div  class='flex_column av-clmgv-491c5c845807bf22b9a7db5ab434d25d av_one_fourth flex_column_div  '     ><div  class='avia-button-wrap av-l7aj4knl-862a2cde2794e0d1211364b7fd7373d7-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aj4knl-862a2cde2794e0d1211364b7fd7373d7\">\n#top #wrap_all .avia-button.av-l7aj4knl-862a2cde2794e0d1211364b7fd7373d7{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aj4knl-862a2cde2794e0d1211364b7fd7373d7 .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/app.zip'  class='avia-button av-l7aj4knl-862a2cde2794e0d1211364b7fd7373d7 av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold App Icons\"><span class='avia_iconbox_title' >Enfold App Icons<\/span><\/a><\/div><\/div>\n<div  class='flex_column av-8mx4f-c067edc0490dcdd2e077eda69d21ab3c av_one_fourth flex_column_div  '     ><div  class='avia-button-wrap av-l7aibvab-1b77e513ac737c02ad10905d19b69704-wrap avia-button-center '>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l7aibvab-1b77e513ac737c02ad10905d19b69704\">\n#top #wrap_all .avia-button.av-l7aibvab-1b77e513ac737c02ad10905d19b69704{\nbackground-color:#42a0bd;\nborder-color:#42a0bd;\ncolor:#ffffff;\ntransition:all 0.4s ease-in-out;\n}\n#top #wrap_all .avia-button.av-l7aibvab-1b77e513ac737c02ad10905d19b69704 .avia-svg-icon svg:first-child{\nfill:#ffffff;\nstroke:#ffffff;\n}\n<\/style>\n<a href='https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/08\/justice.zip'  class='avia-button av-l7aibvab-1b77e513ac737c02ad10905d19b69704 av-link-btn avia-icon_select-no avia-size-medium avia-position-center'   aria-label=\"Enfold Law Icons\"><span class='avia_iconbox_title' >Enfold Law Icons<\/span><\/a><\/div><\/div>\n<div  class='hr av-d3e4n-275b5636b953af0efea2328395085ef5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3214j3-46d30c408894f99cf158dfc4217672cb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to find the icon unicode?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-aiuc7-04a1a78e8c003cf5aad26ab4f9ad87a3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Icon\u00a0Unicode\u00a0<\/strong>can be used to add the icon as a pseudo element to the menu or other web elements using custom CSS. To find the icon Unicode\u00a0open the icon library in the advanced layout builder by clicking on the icon element and hover over the icon to view the &#8220;Unicode&#8221; or &#8220;Charcode&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4834\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/icon-unicode.png\" alt=\"\" width=\"1274\" height=\"563\" \/><\/p>\n<p>To use the icons as a pseudo element do not forget to add the font family name to your custom CSS. The font family is usually same as the font name displayed on the top left of the icon library (May vary for different icon sets). For flaticons, font-family is <strong>&#8216;<\/strong>flaticon<strong>&#8216;<\/strong> and for fontello, font-family is <strong>&#8216;<\/strong>entypo<strong>&#8211;<\/strong>fontello<strong>&#8216;<\/strong>. Lastly, the Unicode or Charcode is generally used without the prefix U.<\/p>\n<p>Example:<\/p>\n<pre> \r\n\/*----------------------------------------\r\n\/\/ CSS -  Pseudo Element Icon\r\n\/\/--------------------------------------*\/\r\n\r\n#avia-menu  &gt; li:nth-child(1) &gt; a .avia-menu-text:before {\r\n\tcontent:\"\\e803\";\r\n\tfont-family: 'entypo-fontello';\t\r\n\tposition: absolute;\r\n\tleft: 0;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-2t4l6f-b4b0004764a5a2f53d4834ba9826fa39 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2iuzmf-cf5bd398cfc8128ca9c18c73c984f3d5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change icon used for standard theme elements<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2ccofr-a98f882ad7b3ac2e7e579e65afb4737a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The theme has a set of icons defined for theme elements in the main functions.php file in your theme files. They are the icon codes from the entypo-fontello font file that is included in the theme to show all of the various icons used throughout the theme. They array of named instances and their icon codes start just after:<\/p>\n<pre> $avia_config['font_icons'] = apply_filters('avf_default_icons', array(<\/pre>\n<p>If you are modifying the main theme you can just change the values for the icon. If you are using a child theme however you can change them through a function.<\/p>\n<p>For example:<\/p>\n<pre>add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);\r\n\r\nfunction avia_replace_standard_icon($icons)\r\n{\r\n$icons['standard']\t = array( 'font' =&gt;'entypo-fontello', 'icon' =&gt; 'ue915');\r\nreturn $icons;\r\n}<\/pre>\n<\/div><\/section>\n<section  class='av_textblock_section av-m7kb9zle-89d966afc0e79790912a1cb1853fc2f4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Note when using <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/svg-icon-sets\/\">SVG icons<\/a><\/strong><\/p>\n<p>The wp-media-library SVGs are identified by attachment ID, when using these, you should use the attachment ID as following:<\/p>\n<pre><code>function avia_replace_default_icons($icons){\r\n\t$icons['svg__standard'] =  array( 'font' =&gt;'svg_wp-media-library', 'icon' =&gt; '40720');\r\n\t\treturn $icons;\r\n\t}\r\nadd_filter('avf_default_icons','avia_replace_default_icons', 10, 1);<\/code><\/pre>\n<p>For other SVG iconsets you must use the name.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-m7vv831b-5cd241082565d5c7a2bb82a3b387d799 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>For example, to update the Search icon, we can use the following code:<\/p>\n<pre><code>add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);\r\n\r\nfunction avia_replace_standard_icon($icons)\r\n{\r\n   $icons['svg__search'] = array( 'font' =&gt; 'entypo-fontello', 'icon' =&gt; 'ue803' );\r\n   return $icons;\r\n}<\/code><\/pre>\n<p><strong>Important<\/strong>: Iconfont: Entypo Fontello (entypo-fontello) must be activated &#8211; otherwise we have to switch to svg by default<\/p>\n<\/div><\/section>\n<div  class='hr av-27h47z-0f2e7d06231813181b473aaa920aa14f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-20gpsv-9f015dc950587e765b1e93c81478ac63 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<div  class='hr av-1z72a7-5e13d713f0d88e7030a88666932855b7 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1ptp7z-695753d7aa8f5f1e2cb40f903ac7ef44 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Icons are showing as rectangular boxes<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1k62z3-b6f273cb3bd2ec6bcc07f769ec5b676b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Enable CORS (Cross-Origin Resource Sharing):\u00a0<\/strong><\/p>\n<p>If your icons are showing like\u00a0rectangular boxes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4840\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/CORS.png\" alt=\"\" width=\"470\" height=\"63\" \/><\/p>\n<p>It may be because of a\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Cross-origin_resource_sharing\">CORS<\/a>-related issue, here\u2019s how to fix it:<\/p>\n<h4 id=\"apache\">Apache<\/h4>\n<p>Look for the\u00a0<strong>.htaccess<\/strong>\u00a0file at the root of your WordPress installation and add the following to it:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-19eudz-1498522d3f86f8f03f59144510773263 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>IIS7<\/strong><br \/>\nLook for the\u00a0<strong>web.config<\/strong>\u00a0file at the root of your WordPress installation and merge it with the following:<\/p>\n<\/div><\/section>\n\n<div  class='hr av-ut0lr-f8e3cbcb41b72c7f87165baf84cd237b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-t2yt3-e46e2bedd124f86bdcd82cfec88852f6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-na85b-6b6218404f21c999c7ba172c8ddd91c2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><a href=\"http:\/\/fontello.com\" target=\"_blank\" rel=\"noopener\">fontello<\/a><\/p>\n<p><a href=\"http:\/\/flaticon.com\" target=\"_blank\" rel=\"noopener\">flaticon<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-hfnwf-61b34356c9be335c915589e0d966d42b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8k6cv-a199af3bfa1c2a987cae680c477dc05c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=nvb_PKrdcUU\">Icon Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-287","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/287","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=287"}],"version-history":[{"count":8,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/287\/revisions"}],"predecessor-version":[{"id":13923,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/287\/revisions\/13923"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}