{"id":290,"date":"2017-02-19T04:19:13","date_gmt":"2017-02-19T04:19:13","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=290"},"modified":"2018-05-14T10:58:47","modified_gmt":"2018-05-14T10:58:47","slug":"icon-list","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/icon-list\/","title":{"rendered":"Icon List"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-639f30d0be072be348048e59e801f53e\">\n#top .av-special-heading.av-av_heading-639f30d0be072be348048e59e801f53e{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-639f30d0be072be348048e59e801f53e .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-639f30d0be072be348048e59e801f53e .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-639f30d0be072be348048e59e801f53e 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 List<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-7t6qfm-88dba84d48cf2e9fbb3314de7ba8003a 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-7mo4g2-c8e28be3f8934b4acaa7e3fc91866731 '   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-r9egy-9703f64c8684ed0dce8911cd0057bc15 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>IconList is closely related to the Icon Box element and it can consist of any number of Icon List. Users can easily add the icons bundled with the theme or upload custom icons and add them.<\/p>\n<p><a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/icon-list\/\" target=\"_blank\" rel=\"noopener\">Examples of Iconlist<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-7cao02-0c035d6d06db20584382afa88918a500 hr-default  avia-builder-el-4  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-76ek76-a06a835133fb2e8006c36222b3f3c80a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-6  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-or9ve-140f75c6ad6fd11338c85c40eb780f49 hr-default  avia-builder-el-7  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6pp13u-2091c307d99cac8e77a8bc77beb07d47 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-5p4ite-5201ed051968cc2d2632425fd4a61112 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5m66vu-b3cd3190ea38e4164e05d0c7612ebabe '   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-5e8rf6-8dcc54ce99776055e0fb08c12b1e637e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-58sh2a-39e35a8484bc22b2b2f1b3ab612f88b7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Font ( Title \/ Content \/ Link )<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-50vtdm-0c812ac9d4761178b276a45c3e796616 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Title, Content and Link color for the default <strong>Big List<\/strong> is fully customizable from the IconList options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7249\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors.png\" alt=\"\" width=\"1115\" height=\"452\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors.png 1115w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors-300x122.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors-768x311.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors-1030x418.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors-705x286.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Icon-List-colors-450x182.png 450w\" sizes=\"auto, (max-width: 1115px) 100vw, 1115px\" \/><\/p>\n<p>Font family is inherited from the fonts set up in the theme options. For any advanced customisation, you can always use the\u00a0below CSS snippet.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-av_toggle-69e4f19d0220af2c474cb8029b08881a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*-----------------------------------------------<br \/>\n\/\/ CSS -  IconList Fonts Title \/ Content \/ Link<br \/>\n\/\/----------------------------------------------*\/<\/code><\/p>\n<p>\/* IconList Title *\/<br \/>\n#top .avia-icon-list h4.iconlist_title {<br \/>\nbackground: #222;<br \/>\ncolor: #ffc20e!important;<br \/>\npadding: 5px 10px;<br \/>\n}<\/p>\n<p>\/* IconList Content *\/<br \/>\n#top .avia-icon-list .iconlist_content p {<br \/>\ncolor: #3369e7;<br \/>\n}<\/p>\n<p>\/* IconList Link *\/<br \/>\n#top .avia-icon-list h4.iconlist_title a {<br \/>\ncolor: #fff;<br \/>\ndisplay: block;<br \/>\n}<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-4v85l6-904f18c97c1800642838f0914bd883ed hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4s2q96-359f2a6f5595f27d28cf70d0c4083ef4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Icon<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gfxmy-3a87ace9697f25554272ec3c3634c44f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Icon, Icon color and Icon background color can be customizable from the IconList options. However, if you like to add advanced styles please use the below CSS.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-13m26q-a2e52fc3aaaa6f89987a496d6a3c26de'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n\/*----------------------------\r\n\/\/ CSS -  IconList Icon\r\n\/\/----------------------------*\/\r\n\r\n\/* Icon color *\/\r\n#top .avia-icon-list .iconlist_icon .iconlist-char:before {\r\n\tcolor:#ed1c24;\r\n} \r\n\/* Background *\/\r\n#top .avia-icon-list .iconlist_icon {\r\n\tbackground: #002663!important;\r\n}\r\n\/* IconList Timeline *\/\r\n#top .avia-icon-list .iconlist-timeline {\r\n\tborder-color: #ed1c24;\r\n}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-4g5v7m-8c5619b064f4bb6a4a07ccb191b5c28f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-47hy1m-203f4db37341b10a82256c6689d66f2f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Center align icon list<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-42xhiq-1b584bda016c63d5d0c2fb2d34f22859 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To center align the icon list please use the below CSS<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-yh40a-32defbccfe0b211ed6cc2a8db59a8717'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n.avia-icon-list li {\r\n    text-align: center;\r\n}\r\n\r\n.avia-icon-list li .iconlist_icon, \r\n.avia-icon-list li .article-icon-entry {\r\n    float: none;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-3u27oy-45daf9cb5ca13a897ce91e052dccbdf0 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3qzxsa-01c4d41e1c9912c12bfa076048891f87 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove Icon List Timeline<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1ahu2-eafea40b0f28045b417b638d70a65733 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the timeline that extends from one icon to the other in the icon list please use the below CSS<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-pzrq2-d05ce265cde5df65e56c3836230c0aab'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n\/* Remove Icon List Timeline *\/\r\n#top .avia-icon-list .iconlist-timeline {\r\nborder: none!important;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-3cg27u-b28b9721b9d19236a2510a778bb7f63c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3a2qgi-543a2a2cbbde9a72dfb8f59ee258d523 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove Animation<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-32y74a-e81d4a9628dd0d4e8f6d614c0e2cf24b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the default animation from the IconList please use the below CSS code.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-lx236-9ed25243a445cba24cad30f05fcc5f8d'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n\/*------------------------------------\r\n\/\/ CSS -  IconList remove animation\r\n\/\/------------------------------------*\/\r\n\r\n#top .avia-icon-list *{\r\nopacity: 100!important;\r\n \/*CSS transitions*\/\r\n -o-transition-property: none !important;\r\n -moz-transition-property: none !important;\r\n -ms-transition-property: none !important;\r\n -webkit-transition-property: none !important;\r\n transition-property: none !important;\r\n \/*CSS transforms*\/\r\n -o-transform: none !important;\r\n -moz-transform: none !important;\r\n -ms-transform: none !important;\r\n -webkit-transform: none !important;\r\n transform: none !important;\r\n \/*CSS animations*\/\r\n -webkit-animation: none !important;\r\n -moz-animation: none !important;\r\n -o-animation: none !important;\r\n -ms-animation: none !important;\r\n animation: none !important;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-113ve-465c0ad0da06dafff25f4debadba567c hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2s60ky-fa18c05b5840bd769e7d8b18cd205227 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Spacing between icon list.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2ibnmy-f1934e7494bfbbe22c1e6a284318a7a9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add more space between each of the minimal small list as shown in the below example please use the CSS provided below:<\/p>\n<\/div><\/section>\n<div  class='avia-icon-list-container av-2emlii-04e6e4c5f96a51857334ac7e20a41310  avia-builder-el-10  avia-builder-el-no-sibling  iconList-space'><ul class='avia-icon-list avia_animate_when_almost_visible avia-icon-list-left av-iconlist-small av-2emlii-04e6e4c5f96a51857334ac7e20a41310 avia-iconlist-animate'>\n<li><div class='iconlist_icon av-29mq7e-627a6c7e9c7a395a6f02972914a0b7e2 avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/div><article class=\"article-icon-entry av-iconlist-empty\"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: List Title 1\"><div class='av_iconlist_title iconlist_title_small  '  itemprop=\"headline\" >List Title 1<\/div><\/header><div class='iconlist_content '  itemprop=\"text\" ><\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<li><div class='iconlist_icon av-255ec2-c82512b6e1b4c25d96aec5aff1163221 avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/div><article class=\"article-icon-entry av-iconlist-empty\"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: List Title 2\"><div class='av_iconlist_title iconlist_title_small  '  itemprop=\"headline\" >List Title 2<\/div><\/header><div class='iconlist_content '  itemprop=\"text\" ><\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<li><div class='iconlist_icon av-1x04gq-93e771139578f765a62ea6f68198af0f avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/div><article class=\"article-icon-entry av-iconlist-empty\"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: List Title 3\"><div class='av_iconlist_title iconlist_title_small  '  itemprop=\"headline\" >List Title 3<\/div><\/header><div class='iconlist_content '  itemprop=\"text\" ><\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<li><div class='iconlist_icon av-66rii-4d98bff6457b0b91184930dc67aac0b5 avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='\ue80a' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/div><article class=\"article-icon-entry av-iconlist-empty\"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: List Title 4\"><div class='av_iconlist_title iconlist_title_small  '  itemprop=\"headline\" >List Title 4<\/div><\/header><div class='iconlist_content '  itemprop=\"text\" ><\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<li><div class='iconlist_icon av-1idqma-0d3333b5d8b8ab468b808ad116542a5b avia-font-entypo-fontello avia-iconfont avia-font-entypo-fontello'><span class='av-icon-char' data-av_icon='\ue80f' data-av_iconfont='entypo-fontello' aria-hidden=\"true\"><\/span><\/div><article class=\"article-icon-entry av-iconlist-empty\"  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class=\"iconlist_content_wrap\"><header class=\"entry-content-header\" aria-label=\"Icon: List Title 5\"><div class='av_iconlist_title iconlist_title_small  '  itemprop=\"headline\" >List Title 5<\/div><\/header><div class='iconlist_content '  itemprop=\"text\" ><\/div><\/div><footer class=\"entry-footer\"><\/footer><\/article><div class=\"iconlist-timeline\"><\/div><\/li>\n<\/ul><\/div>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-f6os2-b509ae5bf75c466c24fd9b72bf7f9261'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n\u00a0\/*------------------------------------\r\n\/\/ CSS -  IconList space \r\n\/\/------------------------------------*\/\r\n\r\n#top .av-iconlist-small li {\r\n    margin: 10px 0;\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1bkouy-9c5ab93b6f434187b5d39be40da669b9 hr-default  avia-builder-el-11  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-e696-c5b0f90268cee217ff3fdd61c074d33c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Responsive behavior 2 columns in mobile.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-wuq5m-707ba2443daef0b738ad7ea51fb6cf65 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To display the IconList side by side in 2 columns on a portable device. Add the IconList inside the Grid Row element.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4936\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Setup.png\" alt=\"\" width=\"1170\" height=\"291\" \/><\/p>\n<p>In the GridRow element options select the mobile behaviour as &#8220;Cells appear beside each other, just like large screen&#8221;.<\/p>\n<p>To further accommodate the two IconList side by side in small screens please use the below CSS.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-jh64cr0h-2a6e9f8c1431126f26a8d8e7d178a42e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code Snippet<\/strong>:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jh64eosj-d315dbdc71c5aa4b4df300ffe5a03d7e av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-8rwwq-b733bfa5fc69743f6afd63837270d3d7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code>\r\n\r\n\/*------------------------------------\r\n\/\/ CSS -  IconList in portable device\r\n\/\/------------------------------------*\/\r\n\r\n@media only screen and (max-width: 767px) {\r\n#top .avia-icon-list-container {\r\n    margin-top: 75px;\r\n}\r\n#top .avia-icon-list .iconlist_icon {    \r\n    position: absolute;    \r\n    top: -65px;\r\n}\r\n#top .avia-icon-list.avia-icon-list-left .iconlist_icon {    \r\n    left: 0;\r\n}\r\n#top .avia-icon-list.avia-icon-list-right .iconlist_icon {        \r\n    right: 0;\r\n}\r\n#top .avia-icon-list li {\r\n    margin: 0 0 65px 0;\r\n}\r\n\/* IconList Timeline *\/\r\n#top .avia-icon-list .iconlist-timeline {\r\n\tborder-color: transparent;\r\n}\r\n}\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-rsowy-15309184463d5fc780f8d5e61ddd8be0 hr-default  avia-builder-el-13  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-n3wiy-446bbca0bebe319aefb751722896719d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-g43pm-93318e143d75a33adf45e426f79ba974 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7yfya-7022b6f95d35a1f66a684f2ab25a32a0 '   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=arXUypFtzCk\">Icon List 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":"","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-290","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"vinay","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/290","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=290"}],"version-history":[{"count":6,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":8399,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/290\/revisions\/8399"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}