Working with Icons

This document covers the following topics:

Using Own Icons

You can use your own icons in controls and in CSS in the following ways:

  • Reference icon files by URL, whereby the icons do not have to be contained in the User Interface Component or in the web application

  • Copy icon files to the User Interface Component and use the relative URL

Using Bootstrap Icons

The packaged Bootstrap Icons (https://icons.getbootstrap.com/) can be used in controls and CSS. The Bootstrap Icons library contains approximately 1300 icons. The icons are available as icon fonts as well as SVG icons. The icon library comes along within the cisnatural.war in the following subfolder:

cisnatural/HTMLBasedGUI/bootstrapicons

The subfolder /icons contains the SVG icon files.

To see the available icons, open the file cisnatural/HTMLBasedGUI/bootstrapicons/font/index.html in your browser.

http(s)://myhost:myport/mywebapp/HTMLBasedGUI/bootstrapicons/font/index.html

Using Bootstrap Icons as Icon Fonts

Icon fonts can be used in responsive and non-responsive controls. The required CSS file is automatically integrated into the page. There is no need to copy files to the User Interface Component. No additional files need to be applied to the pages.

Support in Responsive Controls

Icon fonts can be used in name/nameprop properties of all controls. A BMOBILE:BUTTON control with a name value

BUTTON <i class="bi-person-square"></i>

will be rendered as

Square button with person

The color of the icon can be manipulated by applying CSS style setting:

BUTTON <i style=”color:green” class="bi-person-square"></i>

Icon fonts can also be used in the title/titleprop properties (tooltips). A BMOBILE:FTEXTOUT with a title value

FTEXTOUT Icon in title <i class="bi-tools"></i>

Will be rendered as:

FTEXTOUT Icon in title

The BMOBILE:IHTML also support this.

Support in Non-Responsive Controls

Icon fonts are supported in the following controls:

COLUMN
CSVCOLUMN
METHODLINK
STATUSBAR
TEXTOUT
TITLEBAR

The IHTML also supports this feature.

However, icon fonts are not supported in title/titleprop.

Using Bootstrap Icons as SVG Icon Files

SVG icon files can be used from the library without copying any file to the User Interface Component. It is sufficient to set a relative URL property value.

Example:

<bmobile:icon iconurl="../HTMLBasedGUI/bootstrapicons/icons/person-circle.svg">

Will be rendered as

Person in circle

Using SVG from Natural Programs

SVG XML can be applied as property value from Natural program. In responsive controls this is supported in all controls with nameprop and titleprop.

IHTML and BMOBILE:IHTML also support this feature.

However, in non-responsive controls SVG XML is only supported in controls that also support a straighttext property.

Example:

<svg class='bi' width='128' height='128' fill='currentColor'>
<use href='../HTMLBasedGUI/bootstrapicons/bootstrap-icons.svg#shop'/>
</svg>

in an BMOBILE:IHTML control will be rendered as:

Icon of a shop