Icons Included (optional)

Commentary

Icon use is challenging . Icons generally are constrained by the social context that they are inserted into. Consider an icon that works in North America. Will this same icon mean the same thing in Europe? Will it be understood in a more graphic text script such as Arabic or Sanskrit? Will it stand out enough to be noticed in pictographic languages in Asia?

Consider the icon represented by a pictograph of a floppy disk. 2010 was the last year of production of the floppy disk after years of decline. Yet, this symbol is still in use today to represent data saving. Isn’t the human mind a curious thing?

Much research is has been done by user experience people on iconography that has become universal through long term exposure and repeated use. This is a small set of icons! When using icons, proper usability testing should be done to ensure that it will be understood and will do the job that is expected of it.

Finally, there is universal agreement by UX experts that icons should also have an associated text label. This scores the highest usability factor and transcends cultural contexts. In general, icons should be used lightly and deliberately with proper forethought. Less is better and provides better usability.

Goldilocks-CSS uses scalable vector graphics (SVG) icons in a CSS mask-image to provide the icon as a background and allow it to be colorized and sized when needed. Using this approach, the icons are in a cachable css file and will not be seen by any assistive technology. Currently, 75 icons are available to cover most use cases.

Other icons from other sets can be added easily. Goldilocks-CSS primarily uses a subset of icons from Lineawesome Icons. A few icons from Feather Icons are also used. The CSS-SVG definition file is 62KB is size (not minified) for an average icon size of 827 bytes. The compressed CSS file is 14.1KB in size.

Usage

Background Icons

Sample HTML Code

                <span class="icon-bg-bell is-small has-text-primary"></span>

                <span class="icon-bg-bell"></span>

                <span class="icon-bg-bell is-medium has-text-secondary"></span>

                <span class="icon-bg-bell is-large has-text-tertiary"></span>