{"id":11932,"date":"2016-12-20T13:22:59","date_gmt":"2016-12-20T13:22:59","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11932"},"modified":"2017-08-31T09:05:17","modified_gmt":"2017-08-31T09:05:17","slug":"icon-list","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/icon-list","title":{"rendered":"Icon List"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]Icon list module allows you to add the list with the custom icons or dots.\u00a0This is a nested shortcode &#8211; module that includes other modules. You may style the container and then fill it in with elements.<\/p>\n<h5><\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General\u00a0settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13059\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/general.png\" alt=\"\" width=\"978\" height=\"425\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/general.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/general-300x130.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/general-768x334.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style<\/strong> &#8211; choose between 3 preset styles.\n<ul>\n<li>\u00a0<strong>Simple<\/strong> \u00a0&#8211; the icons and content are displayed in a simple list, without delimiters.<\/li>\n<li><strong>Separated<\/strong> &#8211;\u00a0there is delimiter added between each list item, including the icon.<\/li>\n<li><strong>Half-divided <\/strong>&#8211; there is a short delimiter (under icon) added between each list item.<\/li>\n<li><strong>Underlined\u00a0<\/strong>&#8211;\u00a0there is delimiter added between each list item, without icon.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong>\u00a0\u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type\u00a0<strong>custom-style<\/strong>class and then go to\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del>\u00a0<del>Custom CSS<\/del>\u00a0field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Icon style&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Icon Style<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13060\" style=\"font-size: 16px;\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-style-1.png\" alt=\"\" width=\"978\" height=\"230\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-style-1.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-style-1-300x71.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-style-1-768x181.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Icon style<\/h5>\n<ul>\n<li><strong>Icon size<\/strong>\u00a0\u2013 select the size for the icons for Icon List module. \u00a0The default size is 18px, the max icon size is 72px. If you set icon size more than 36px, please do not forget to specify the thumb size as well.<\/li>\n<li><strong>Space after icon<\/strong>\u00a0\u2013 set the offset between the icon and the content.<\/li>\n<li><strong>Space under list item<\/strong> \u2013 set the offset between the list items.<\/li>\n<li><strong>Icon color<\/strong>\u00a0\u2013 specify the color of the icon.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Thumb style&#8221; tab_id=&#8221;1498206613530-10fdb0b4-538e&#8221;][vc_column_text]<\/p>\n<h3>Thumb style<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14067\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-list.png\" alt=\"\" width=\"978\" height=\"267\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-list.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-list-300x82.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/icon-list-768x210.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Thumb size<\/strong> &#8211; \u00a0set the size of the icon&#8217;s thumbnail. Max size is 500px.se<\/li>\n<li><strong>Border radius<\/strong> &#8211; set the border radius of the icon&#8217;s thumbnail to have rounded corners. Max value is 500px.<\/li>\n<li><strong>Background color<\/strong> &#8211; specify the background color for the icon&#8217;s thumbnail.<\/li>\n<li><strong>Thumb border style<\/strong> &#8211; select one of the available border styles for the icon&#8217;s thumbnail.<\/li>\n<li><strong>Border width<\/strong> &#8211; set the border width in px.<\/li>\n<li><strong>Border color<\/strong> &#8211; select the suitable color for the border.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Delimiter style&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Delimiter style<\/h3>\n<h4>For Separated, Half-Divided and Underlined styles only.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13061\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/delimiter-style.png\" alt=\"\" width=\"978\" height=\"153\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/delimiter-style.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/delimiter-style-300x47.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/delimiter-style-768x120.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Delimiter height<\/strong> &#8211; specify the height for the delimiter between list icons items in px.<\/li>\n<li><strong>Delimiter style<\/strong> &#8211; select one of the available border styles.\u00a0<strong>Dotted<\/strong>,\u00a0<strong>dashed, double<\/strong>\u00a0and\u00a0<strong>solid<\/strong>\u00a0variants are available.<\/li>\n<li><strong>Delimiter color<\/strong> &#8211;\u00a0\u00a0specify the color of the delimiter between list icons items.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3>Typography settings<\/h3>\n<p>Default settings are inherited from <del class=\"support-arrow-right\">Theme options<\/del> <del class=\"support-arrow-right\">Styling options<\/del> \u00a0<del class=\"support-arrow-right\">Link options<\/del>\u00a0<del>Link Typography section.<\/del><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13733\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/content-typography-icon-list-2.png\" alt=\"\" width=\"978\" height=\"470\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/content-typography-icon-list-2.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/content-typography-icon-list-2-300x144.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/content-typography-icon-list-2-768x369.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the list.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the list.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) from the list.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;List Icon Item settings&#8221; tab_id=&#8221;1498204279274-16ad8a1c-fe6c&#8221;][vc_column_text]<\/p>\n<h3>List Icon Item settings<\/h3>\n<h6>In this section, you can customize the list icon items of the module.<\/h6>\n<h6>By clicking on the\u00a0arrow down icon you can reveal the whole section to adjust it to your needs. Here you are also able to duplicate, change\u00a0their order (simply drag-n-drop the blocks) and delete the unnecessary ones as well.<\/h6>\n<h5>Content Typography<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13068\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-settings.png\" alt=\"\" width=\"978\" height=\"723\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-settings.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-settings-300x222.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-settings-768x568.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Icon to display<\/strong>\u00a0\u2013 select whether the list will be with or without the\u00a0icon or the custom image will be displayed instead.\n<ul>\n<li><strong>Icon<\/strong> &#8211; select the icon from the list of available ones for the Icon List module.<\/li>\n<li><strong>Link<\/strong> &#8211; set it to enable to add the link to the icon list item.\n<ul>\n<li><strong>Add link<\/strong> &#8211; add a custom link or select existing page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Custom image<\/strong> &#8211; select this option to use the custom image.\n<ul>\n<li><strong>Upload image<\/strong> &#8211; upload the custom image from media library.<\/li>\n<li><strong>Link<\/strong> &#8211; set it to enable to add the link to the icon list item.\n<ul>\n<li><strong>Add link<\/strong> &#8211; add a custom link or select existing page.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Without icon<\/strong> &#8211; select this style if you do not need to use custom image or icons in the module.<\/li>\n<li><strong>Link<\/strong> &#8211; set it to enable to add the link to the icon list item.\n<ul>\n<li><strong>Add link<\/strong> &#8211; add a custom link or select existing page.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Content settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13069\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-content.png\" alt=\"\" width=\"978\" height=\"447\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-content.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-content-300x137.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/list-icon-item-content-768x351.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>List icon content<\/strong> &#8211;\u00a0enter the content for your icon list item.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Icon list module allows you to add the list with the custom icons or dots.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[29,23,22,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11932"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=11932"}],"version-history":[{"count":18,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11932\/revisions"}],"predecessor-version":[{"id":14068,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11932\/revisions\/14068"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}