Icons

In a web app specifically, using icons offers several advantages that can enhance the user experience and functionality:

  • Improved navigation and user interface clarity.
  • Streamlined action buttons and cleaner interface design.
  • Effective feedback and alert communication.
  • Enhanced sorting, filtering, and input field hints.
  • Visualizing progress and loading.
  • Encouraging user engagement and interactivity.
  • Responsive design for different devices.
  • Reinforcing brand identity.
  • Language-agnostic communication.
  • Aesthetically pleasing design.
  • Icons in web apps serve to simplify interfaces, guide users, and enhance aesthetics and functionality.

Therefore, Genio provides the option to insert icons of various types:

  • Image
  • Web-font
  • Vector

How to add?

  • Go to the resources menu.
  • Use the insert button to add a new resource.
  • Identifier: File identifier (required).
  • File Name: Name of the file you wish to use (e.g., "file01.png") (required).
  • File Type: You can choose the type of file you wish to introduce. Depending on the file type, the configuration differs (required).
  • File: You need to upload/provide the resource file itself (required).

File Types

Image

Apply on Genio

  • To add an icon resource, the file must have a .png, .jpg or another traditional image extension.
  • Add the resource, configure the necessary settings, and select the icon type.

Web-font

Icon fonts are typefaces that use tiny images rather than letterforms. Like type, each character is scalable and can be modified using CSS. The main reasons for using an icon font are that you can change the size, color, shape, with ease. Icon fonts are transparent by nature so you can put them on any color or type of background and you can add strokes or change the opacity of icons.

(Retrived from https://designshack.net/articles/typography/what-is-an-icon-font/ on January 08th, 2024)

Apply on Genio

  • To add an icon resource, the file must have a .scss extension.

The file must contain the class of your icon, example: .ID_EXAMPLE { @extend .glyphicons; @extend .glyphicons-list; }

  • The ID_EXAMPLE serves as the resource identifier, while glyphicons-list acts as the icon reference. For additional icon options, you can explore a variety of choices at Glyphsearch or any other preferred resource page.
  • Add the resource, configure the necessary settings, and select the Web-font type.

Vector

An SVG (scalable vector format) file can give you a little more flexibility in design. (You aren’t limited to one color). The small, scalable files can be uploaded right into your media directory and are easy to work with. This is a good option if you only need a handful of icons and don’t want to deal with a library. SVGs are more flexible with the ability to add more colors and animation.

Apply on Genio

To add an icon resource, the file must have a .svg extension. The file must contain the icon vector, example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" style="enable-background:new 0 0 48 48;" xml:space="preserve" viewBox="21.23 14.23 5.53 19.53">
<g id="option-vertical_2_">
    <path id="option_2_" d="M26.766,17c0,1.527-1.238,2.766-2.766,2.766S21.234,18.527,21.234,17s1.238-2.766,2.766-2.766   S26.766,15.473,26.766,17z M24,21.234c-1.527,0-2.766,1.238-2.766,2.766s1.238,2.766,2.766,2.766s2.766-1.238,2.766-2.766   S25.527,21.234,24,21.234z M24,28.234c-1.527,0-2.766,1.238-2.766,2.766s1.238,2.766,2.766,2.766s2.766-1.238,2.766-2.766   S25.527,28.234,24,28.234z"/>
</g>
</svg>
  • You can search on web for another svg icons and incluse transform me them for different purposes.
  • Add the resource, configure the necessary settings, and select the Vector type.

How to use?

The icons can be used in various places, notably in:

  • Buttons
  • Static Images
  • Menu Entries
  • Modules
  • Tabs
  • Others

For most locations where icons are used, the method of use is always the same; it is only necessary to refer to the resource to be used through the specialized "icon" field. In forms for inserting buttons, static images, menu entries, tabs, among others, you will always find a field for this purpose.

  • However, the method of use in modules differs from the rest. In the module identification area, there is a field to add the icon, but it does not allow choosing from all existing resources.
  • In this specific case, it is necessary to manually add the Identifier of the resource. It should be noted that the identifier must be 8 characters in length (this must be taken into account at the time of creation).

Customization

Just like the other resource types, even though their options are more limited, icons can also be customized. For more on that, take a look at Customized Resources.