{"id":704,"date":"2020-09-03T12:24:00","date_gmt":"2020-09-03T12:24:00","guid":{"rendered":"https:\/\/dentalia.orionthemes.com\/documentation\/?page_id=704"},"modified":"2021-01-06T12:58:46","modified_gmt":"2021-01-06T12:58:46","slug":"icon-with-text-widget","status":"publish","type":"page","link":"https:\/\/dentalia.orionthemes.com\/documentation\/widgets\/icon-with-text-widget\/","title":{"rendered":"Icon With Text Widget"},"content":{"rendered":"<div id=\"pl-704\"  class=\"panel-layout\" ><div id=\"pg-704-0\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-1-in-row mobile-default desktop-default bg-altsitebg panel-row-style panel-row-style-for-704-0\" data-stretch-type=\"full\" ><div id=\"pgc-704-0-0\"  class=\"panel-grid-cell panel-grid-cell-empty\" ><\/div><div id=\"pgc-704-0-1\"  class=\"panel-grid-cell panel-grid-cell-mobile-last\" ><div id=\"panel-704-0-1-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"0\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-0-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:0px;\">\r\n\t\t<div class=\"col-md-12   text-center style-display-2 style-primary-color\">\r\n\t\t\t<h1 class=\"primary-color text-uppercase display-2\">\r\n\t\t\t\tIcon With Text Widget\t\t\t<\/h1>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-704-0-1-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"1\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-0-1-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p class=\"lead\" style=\"text-align: center;\">Add multiple icons with short descriptions. Use this widget to display contact information or any featured content.<\/p>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-704-0-2\"  class=\"panel-grid-cell panel-grid-cell-empty\" ><\/div><\/div><\/div><div id=\"pg-704-1\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-1-in-row mobile-1-in-row desktop-default clear panel-row-style panel-row-style-for-704-1\" data-stretch-type=\"full\" ><div id=\"pgc-704-1-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-704-1-0\" ><div id=\"panel-704-1-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"2\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-1-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:12px;\">\r\n\t\t<div class=\"col-md-12   text-left style-h2 style-primary-color\">\r\n\t\t\t<h2 class=\"primary-color\">\r\n\t\t\t\t<span class=\"mark mark-doc\">1<\/span> Adding icons with text\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-704-1-0-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"3\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-1-0-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<ul class=\"list-arrow lead-list\">\n<li><strong>Add+<\/strong> adds a new element to the widget.<\/li>\n<li><strong>Select an icon: <\/strong>You can set your icon here.<\/li>\n<li><strong>Choose an image: <\/strong>This will override the icon.<\/li>\n<li><strong>Icon Title<\/strong> and <strong>Description: <\/strong>You can add your text here.<\/li>\n<li><strong>Destination URL:<\/strong> Will add a link to the icon and the title. You can set this link to <strong>open it in a new tab<\/strong>.<\/li>\n<li><strong>Colors:<\/strong> You can set a color for the icon and the icon container background.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><div id=\"pgc-704-1-1\"  class=\"panel-grid-cell\" ><div id=\"panel-704-1-1-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"4\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-1-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_image_w so-widget-orion_image_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"image-w relative  img-frame shadow-4\">\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a rel=\"orion-images\" class=\" overlay-none overlay-hover-none\" href=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-iconwithtext-widget.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-iconwithtext-widget.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"960\" height=\"879\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-iconwithtext-widget.jpg\" class=\"attachment- size-\" alt=\"\" loading=\"lazy\" \/>\t\t\t<div class=\"overlay\"><\/div>\r\n\t\t\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\r\n\t<div class=\"absolute\">\r\n\t\t<div class=\"hover-desc table-wrap\">\r\n\t\t\t<div class=\"cell-wrap\">\r\n\t\t\t\t<h4 class=\"text-light\"><\/h4>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\t\t\t\t\t\r\n<\/div>\r\n\r\n<\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pg-704-2\"  class=\"panel-grid panel-has-style\" ><div class=\"orion-collapse-right-top siteorigin-panels-stretch divider-no-animation tablet-1-in-row mobile-1-in-row desktop-default clear panel-row-style panel-row-style-for-704-2\" style=\"z-index:2;\" data-stretch-type=\"full\" data-z-index=\"2\" ><div id=\"pgc-704-2-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-704-2-0\" ><div id=\"panel-704-2-0-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"5\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-2-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_image_w so-widget-orion_image_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"image-w relative  img-frame shadow-4\">\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a rel=\"orion-images\" class=\" overlay-none overlay-hover-none\" href=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-iconwithtext-widget-settings.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-iconwithtext-widget-settings.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"960\" height=\"713\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-iconwithtext-widget-settings.jpg\" class=\"attachment- size-\" alt=\"\" loading=\"lazy\" \/>\t\t\t<div class=\"overlay\"><\/div>\r\n\t\t\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\r\n\t<div class=\"absolute\">\r\n\t\t<div class=\"hover-desc table-wrap\">\r\n\t\t\t<div class=\"cell-wrap\">\r\n\t\t\t\t<h4 class=\"text-light\"><\/h4>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\t\t\t\t\t\r\n<\/div>\r\n\r\n<\/div><\/div><\/div><\/div><\/div><div id=\"pgc-704-2-1\"  class=\"panel-grid-cell\" ><div class=\"custom panel-cell-style panel-cell-style-for-704-2-1\" ><div id=\"panel-704-2-1-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"6\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-2-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:12px;\">\r\n\t\t<div class=\"col-md-12   text-left style-h2 style-primary-color\">\r\n\t\t\t<h2 class=\"primary-color\">\r\n\t\t\t\t<span class=\"mark mark-doc\">2<\/span> Style &amp; Layout Settings\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-704-2-1-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"7\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-2-1-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<ul class=\"list-arrow lead-list\">\n<li><strong>Elements per row:\u00a0<\/strong>Sets the number of icons in a row.<\/li>\n<li><strong>Widget Style: <\/strong>You can choose between 4 styles.*<\/li>\n<li><strong>Icon container:\u00a0<\/strong>Sets the shape of the icon container. Available options are <strong>Square<\/strong>, <strong>Circle<\/strong>, and <strong>none<\/strong>.<\/li>\n<li><strong>Text color:\u00a0<\/strong>Choose between light and dark text colors.<\/li>\n<li><strong>Alignment:<\/strong> The elements can be aligned left, right, or center.<\/li>\n<li><strong>Bottom margin:\u00a0<\/strong>Adds space below an individual element.<\/li>\n<li><strong>Center on mobile\/tablet: <\/strong>Checking these options will adjust the layout on mobile devices.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pg-704-3\"  class=\"panel-grid panel-has-style\" ><div class=\"divider-no-animation tablet-default mobile-default desktop-default custom panel-row-style panel-row-style-for-704-3\" ><div id=\"pgc-704-3-0\"  class=\"panel-grid-cell\" ><div id=\"panel-704-3-0-0\" class=\"so-panel widget widget_sow-editor panel-first-child panel-last-child\" data-index=\"8\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-3-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<div class=\"alert alert-info\" role=\"alert\"><strong>Icon aside:<\/strong> The title and description appear next to the icon.<br \/>\n<strong>Title on top:<\/strong> The title is placed above the icon, with the description next to the icon.<br \/>\n<strong>Large icon on top:<\/strong> The icon is placed above the text. Centered by default.<br \/>\n<strong>Icon on top:<\/strong> Same as \"large icon on top\", but with a smaller icon.<\/div>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pg-704-4\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-default mobile-default desktop-default bg-altsitebg panel-row-style panel-row-style-for-704-4\" data-stretch-type=\"full\" ><div id=\"pgc-704-4-0\"  class=\"panel-grid-cell\" ><div id=\"panel-704-4-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"9\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-4-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:24px;\">\r\n\t\t<div class=\"col-md-12   text-center style-display-3 style-text-default\">\r\n\t\t\t<h3 class=\"text-default text-uppercase display-3\">\r\n\t\t\t\tExample: Large icon on top\t\t\t<\/h3>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-704-4-0-1\" class=\"so-panel widget widget_orion_icon_text_w\" data-index=\"10\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-4-0-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_icon_text_w so-widget-orion_icon_text_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"row icon-box-items-wrap grid icon-top\">\r\n \r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"icon-box-wrap clearfix col-lg-4 col-md-4 col-sm-6 \" style=\"margin-bottom:60px;\">\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"icon-wrap relative simple\">\r\n\t\t\t\t\t<span class=\"sow-icon-dentalicons\" data-sow-icon=\"&#xe80b;\"\n\t\tstyle=\"color: #00bcd4\" \n\t\taria-hidden=\"true\"><\/span>\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<h4 class=\"item-title h6\">Teeth whitening<\/h4>\t\t\t\r\n\r\n\t\t\t\t\t\t<span class=\"description\">Lorem ipsum dolor sit amet.<\/span>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"icon-box-wrap clearfix col-lg-4 col-md-4 col-sm-6 \" style=\"margin-bottom:60px;\">\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"icon-wrap relative simple\">\r\n\t\t\t\t\t<span class=\"sow-icon-dentalicons\" data-sow-icon=\"&#xe80c;\"\n\t\tstyle=\"color: #3f51b5\" \n\t\taria-hidden=\"true\"><\/span>\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<h4 class=\"item-title h6\">Prevention<\/h4>\t\t\t\r\n\r\n\t\t\t\t\t\t<span class=\"description\">Lorem ipsum dolor sit amet.<\/span>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"icon-box-wrap clearfix col-lg-4 col-md-4 col-sm-6 \" style=\"margin-bottom:60px;\">\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"icon-wrap relative simple\">\r\n\t\t\t\t\t<span class=\"sow-icon-dentalicons\" data-sow-icon=\"&#xe808;\"\n\t\tstyle=\"color: #2b354b\" \n\t\taria-hidden=\"true\"><\/span>\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<h4 class=\"item-title h6\">Dental implants<\/h4>\t\t\t\r\n\r\n\t\t\t\t\t\t<span class=\"description\">Lorem ipsum dolor sit amet.<\/span>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\r\n<\/div><\/div><\/div><\/div><div id=\"panel-704-4-0-2\" class=\"so-panel widget widget_orion_heading_w\" data-index=\"11\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-4-0-2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:24px;\">\r\n\t\t<div class=\"col-md-12   text-center style-display-3 style-text-default\">\r\n\t\t\t<h3 class=\"text-default text-uppercase display-3\">\r\n\t\t\t\tExample: Icon aside\t\t\t<\/h3>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-704-4-0-3\" class=\"so-panel widget widget_orion_icon_text_w panel-last-child\" data-index=\"12\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-704-4-0-3\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_icon_text_w so-widget-orion_icon_text_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"row icon-box-items-wrap grid short\">\r\n \r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"icon-box-wrap clearfix col-lg-4 col-md-4 col-sm-6 \" style=\"margin-bottom:60px;\">\t\t\r\n\r\n\t\t\t<h4 class=\"item-title h6\">Teeth whitening<\/h4>\t\t\t\t\t\t\t<div class=\"icon-wrap absolute square\">\r\n\t\t\t\t\t<span class=\"sow-icon-dentalicons2\" data-sow-icon=\"&#xe908;\"\n\t\tstyle=\"color: #ffffff; background-color: #00bcd4\" \n\t\taria-hidden=\"true\"><\/span>\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t<span class=\"description\">Lorem ipsum dolor sit amet.<\/span>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"icon-box-wrap clearfix col-lg-4 col-md-4 col-sm-6 \" style=\"margin-bottom:60px;\">\t\t\r\n\r\n\t\t\t<h4 class=\"item-title h6\">Prevention<\/h4>\t\t\t\t\t\t\t<div class=\"icon-wrap absolute square\">\r\n\t\t\t\t\t<span class=\"sow-icon-dentalicons2\" data-sow-icon=\"&#xe903;\"\n\t\tstyle=\"color: #ffffff; background-color: #3f51b5\" \n\t\taria-hidden=\"true\"><\/span>\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t<span class=\"description\">Lorem ipsum dolor sit amet.<\/span>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\r\n\t\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t\r\n\t\t<div class=\"icon-box-wrap clearfix col-lg-4 col-md-4 col-sm-6 \" style=\"margin-bottom:60px;\">\t\t\r\n\r\n\t\t\t<h4 class=\"item-title h6\">Dental implants<\/h4>\t\t\t\t\t\t\t<div class=\"icon-wrap absolute square\">\r\n\t\t\t\t\t<span class=\"sow-icon-dentalicons2\" data-sow-icon=\"&#xe90d;\"\n\t\tstyle=\"color: #ffffff; background-color: #2b354b\" \n\t\taria-hidden=\"true\"><\/span>\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t<span class=\"description\">Lorem ipsum dolor sit amet.<\/span>\r\n\t\t\t\r\n\t\t<\/div>\r\n\t\r\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Add multiple icons with short descriptions. Use this widget to display contact information or any featured content. Add+ adds a new element to the widget. Select an icon: You can set your icon here. Choose an image: This will override the icon. Icon Title and Description: You can add your text here. Destination URL: Will<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":984,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/704"}],"collection":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=704"}],"version-history":[{"count":9,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/704\/revisions"}],"predecessor-version":[{"id":2959,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/704\/revisions\/2959"}],"up":[{"embeddable":true,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/984"}],"wp:attachment":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}