Icon Font Libraries | Dreamtsoft Wiki

There are several places that an icon is selected and displayed. The list of icons that are selectable come from an icon font library. By default, only the Font Awesome icon font library is provided. Additional icon font libraries may be added to your system by defining a new one.

Define Icon Font Library

To define a new Icon Font Library:

Click the gears icon in the upper right of the screen
Select Icon Font Libraries from the menu on the left
Add a new Icon Font Library

Title

A title for the library used when selecting the library from a choice list.

Name

The name of the library used as part of the icon name when selecting an icon. For example, the arrows font awesome icon will be named fontawesome:arrow.

Template

The HTML template used to generate the HTML for an icon within this library. The template supports 2 replacements:

name: The icon name (such as arrow in the example above)

classes: Additional classes for the icon

This is the template for the Font Awesome icon font library:

CSS

The CSS style sheet for the icon font library.

Definition

In order to be able to search the icon font libraries, a description of each of the available fonts, along with keywords, must be defined for each library. The Definition is JSON that defines the icons and keywords and has the following format:

  {
     "icons": {
        "NAME_OF_ICON": {
           "keywords": [ ARRAY_OF_KEYWORD_STRINGS ]
       },
        "NAME_OF_ICON": {
           "keywords": [ ARRAY_OF_KEYWORD_STRINGS ]
       },
       etc...
  }

The search is performed against the icon names and the keywords and looks like this:

Upload Font Files

The font files associated with the icon font library may be uploaded by:

Click the gears icon in the upper right of the screen
Select Files from the menu on the left
Right click on the fonts folder and select Upload Files
Select the font file(s) for this icon font library to upload them

The fonts may be referenced in the CSS for the Icon Font Library from the fonts/ directory. Here is an example from the Font Awesome style sheet:

  @font-face {
     font-family: 'FontAwesome';
     src: url('fonts/fontawesome-webfont.eot?v=4.4.0');
     src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
          url('fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
          url('fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
          url('fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
          url('fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
     font-weight: normal;
     font-style: normal
  }

API

To get the HTML for an icon, the following is used:

  /**
   * Get HTML for an icon
   * 
   * @param (String) name of icon (specified as library:icon, if library: is not specified, font awesome is used)
   * @param (Object) data object containing additional replacements in icon, such as 'class'
   * 
   * @return (String) HTML string used to display icon
   */
  IconLibraries.getHTML(icon_name, data)