topic Re: Increase Icon Size in ArcGIS Web AppBuilder Questions

Increase Icon Size

TimHayes1 — Tue, 08 Nov 2016 20:51:58 GMT

How do I go about increasing the size of the icons in the Header Controller Widget?

Re: Increase Icon Size

NickHarvey — Tue, 08 Nov 2016 21:34:54 GMT

Hi Tim - I think you can change the size for these by editing the values in the apps' header controller css: Example... "...\\FoldableTheme\widgets\HeaderController\css\style.css"

Change the "24" values below to the value that you need. I also had to change the header width and the logo size to make this all work as well..

jimu-widget-header-controller .icon-node img{
height: 24px;
width: 24px;

HTH

-Nick

Re: Increase Icon Size

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:50:00 GMT

Nick,

Is spot on. Here are a few other details.

CSS change mentioned above
line 783 in the HeaderCOntroller\Widget.js change marginTop: ((this.height - 24) / 2) + 'px' change the 24 to the same number you used in your step 1.
in the apps config.json find the header controller widget line and change the headers height there:

  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.1",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_19",
        "icon": "themes/FoldableTheme/widgets/HeaderController/images/icon.png?wab_dv=2.1",
        "name": "HeaderController",
        "label": "Header Controller"
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4. Then in the config.json still you will have to shift all the other widgets top down the amount that you increased the header (especially the maps top property).

Re: Increase Icon Size

GeorgeKatsambas — Tue, 25 Apr 2017 14:21:37 GMT

Widgets that are not in the header which css files do you need to modify to change icon size?

Re: Increase Icon Size

RobertScheitlin__GISP — Tue, 25 Apr 2017 14:37:39 GMT

George,

That is covered in this thread: https://community.esri.com/thread/171233

Re: Increase Icon Size

BrianEveritt1 — Wed, 06 Feb 2019 18:04:46 GMT

what about for dart theme. I'm trying to increase the size of the icons and the text that shows up when you hover over them. The icons are too small and the text is too small also for the project i'm doing. i've changed the icon size but it appears the icons wrap to the next line and a new scroll bar appears. Is there a way to make them increase in size and go down the line without becoming a icons you have to scroll too?