{"id":8871,"date":"2015-11-26T15:03:47","date_gmt":"2015-11-26T15:03:47","guid":{"rendered":"http:\/\/help.instantatlas.com\/report-builder-agol\/agol\/widgets\/filled-icon-widget\/"},"modified":"2023-07-19T15:21:13","modified_gmt":"2023-07-19T14:21:13","slug":"filled-icon-widget","status":"publish","type":"page","link":"https:\/\/help.reports.esriuk.com\/report-builder\/widgets\/filled-icon-widget\/","title":{"rendered":"Filled Icon Widget"},"content":{"rendered":"<p>The <strong>Filled Icon<\/strong> widget shows the size of data values by how much of an icon (or the background of an icon) is filled.<\/p>\n<p><a href=\"https:\/\/help.instantatlas.com\/report-builder\/wp-content\/uploads\/sites\/51\/2015\/09\/html5-fill-icon-widget-example1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/help.instantatlas.com\/report-builder\/wp-content\/uploads\/sites\/51\/2015\/09\/html5-fill-icon-widget-example1.png\" alt=\"\" width=\"249\" height=\"203\" class=\"alignnone size-full wp-image-891\" \/><\/a><\/p>\n<p>The section below describes specific settings for the Filled Icon widget. Note that generic widget settings are described on the <a href=\"https:\/\/help.instantatlas.com\/report-builder\/widget-generic-settings\/\">Widget Generic Settings<\/a> page, so if you cannot find the setting you are looking for check there too.<\/p>\n<h3>Icon<\/h3>\n<p><strong>Icon(s)<\/strong><\/p>\n<p>Choose an icon for the widget. Type some text in the box to see any matching icons e.g. &#8216;male&#8217; or use the arrow to the right of the box to access the list of available icons. You can add more than one icon if you wish. There is a button to toggle direct edit view if you wish to enter a list of icon names with a space between each e.g. &#8216;arrow-left arrow-right&#8217;<\/p>\n<p><strong>Icon fill<\/strong><\/p>\n<p>Choose a fill type for the icon.<\/p>\n<p><strong>Icon fill between<\/strong><\/p>\n<p>If you wish the icon(s) to fill between two values, type the two values separated by a comma e.g. &#8216;0,100&#8217; or use the arrow to the right of the box to see suggested values.<\/p>\n<p><strong>Icon fill color<\/strong><\/p>\n<p>Choose a color for the icon fill.<\/p>\n<p><strong>Icon fill style<\/strong><\/p>\n<p>Choose whether the fill will apply to the background of the icon or to the icon itself.<\/p>\n<p><strong>Image &#8211; fill<\/strong><\/p>\n<p>Type the URL to a fill image or use the browse button to the right of the box. This setting will be greyed out if <strong>Type<\/strong> is not &#8216;image&#8217;.<\/p>\n<p><strong>Image &#8211; background<\/strong><\/p>\n<p>Type the URL to a background image or use the browse button to the right of the box. This setting will be greyed out if <strong>Type<\/strong> is not &#8216;image&#8217;.<\/p>\n<p><strong>Size<\/strong><\/p>\n<p>Type or use the arrow buttons to set the size of the icon(s).<\/p>\n<p><strong>Type<\/strong><\/p>\n<p>Choose an icon type.<\/p>\n<p><strong>Tooltip<\/strong><\/p>\n<p>Type a tooltip format for the icon(s) e.g. #COLOR #FNAME, #INAME: #IVALUE<\/p>\n<p><strong>Icon labels?<\/strong><\/p>\n<p>Choose whether to show labels for the icon(s) and if so, their position.<\/p>\n<p><strong>Icon label <\/strong><strong>format<\/strong><\/p>\n<p>Type a label format for the icon(s) e.g. #INAME. This setting will be greyed out if <strong>Icon labels?<\/strong> is false.<\/p>\n<p><strong>Icon label font size<\/strong><\/p>\n<p>Choose a label font size for the icon(s). This setting will be greyed out if <strong>Icon labels?<\/strong> is false.<\/p>\n<p><strong>Icon label bold<\/strong><\/p>\n<p>Use the toggle to choose if the icon label should be bold. This setting will be greyed out if <strong>Icon labels?<\/strong> is false.<\/p>\n<p><strong>Icon label color<\/strong><\/p>\n<p>Choose a label color for the icon(s). This setting will be greyed out if <strong>Icon labels?<\/strong> is false.<\/p>\n<h3>Icons &#8211; Layout<\/h3>\n<p><strong>Layout<\/strong><\/p>\n<p>Choose a layout for the icon(s).<\/p>\n<p><strong>Alignment<\/strong><\/p>\n<p>Choose an alignment for the icon(s).<\/p>\n<p><strong>Vertical alignment<\/strong><\/p>\n<p>Choose a vertical alignment for the icon(s).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Filled Icon widget shows the size of data values by how much of an icon (or the background of an icon) is filled. The section below describes specific settings for the Filled Icon widget. Note that generic widget settings are described on the Widget Generic Settings page, so if you cannot find the setting [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":0,"parent":4321,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8871","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/8871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/comments?post=8871"}],"version-history":[{"count":0,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/8871\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/pages\/4321"}],"wp:attachment":[{"href":"https:\/\/help.reports.esriuk.com\/report-builder\/wp-json\/wp\/v2\/media?parent=8871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}