Improving The UI of The Divi Icon Picker Area
Increase The Height of The Divi Icon Pickers
This tutorial is quite simple, and short. But taking a few moments to make this and place it into your website will be well spent time. This tutorial will show you how to increase the height of the Divi Builder icon picker area so that you can actually see to choose an icon.
We are thinking about doing a series on this, so let us know in the comments what other Divi Builder UI improvements you want us to make!
When you are trying to be efficient in your website design, it can be frustrating when things that should be simple are not. One of those things that can be improved quickly in Divi is the icon picker field. By default, it is not easy to scroll and find what you need because of how short it is.
You can actually change a lot of things in the Divi Builder UI with CSS. You just need to sort through the code and you can find it relatively easily if you know how to use the browser inspect too. The snippet below is all you need to make the icon picker areas taller in your Divi Builder.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
/*increase the height of the Divi icon picker area*/
.et-db #et-boc .et-l .et-fb-font-icon-list {
min-height: 400px!important;
}
And just like that, you can enjoy this tiny improvement! You can change the 400px to anything else you want, but I thought that was a pretty good place to start.
