Creating custom buttons for a FSI Viewer JS/ FSI Pages JS skin

In order to fit the design of your website perfectly, the FSI Viewer JS and FSI Pages JS skin can easily be customized to your liking via CSS. The tutorial Creating custom skins for FSI Viewer shows you the structure of the CSS file with an example custom skin. This tutorial explains how to use custom icons for the buttons of FSI Viewer JS, but the same steps also apply to changing the buttons of FSI Pages JS.

View Sample with custom font/icons

How are the icons build up?

FSI Viewer JS comes with one default set of icons, which are based in a font called “FSI Viewer Glyph”. Using fonts for the button icons enables us to use vector based icons, which results in perfectly scalable button icons. We assign each icon as a unicode character (a,b,c,d,e…).
The image below shows how the icons in the default “FSI Viewer Glyph” font are assigned:

With creating an own font, you can include your own icons in order to make your skin even more individual.

Where the fonts are located

Used fonts can be found here: WEBAPPS/fsi/viewer/skins/resources/_fonts.
In this location custom fonts can be placed.

How you can create your own icons/ fonts

You can create your own fonts with icons with OpenSouce programs such as FontForge or BirdFont and afterwards use them in the custom skin CSS. Usually, the icons are created with a vector-based program such as Adobe Illustrator and afterwards imported in the font program. It is also possible to create the icons directly in those programs of course.

Here is an example of custom icons created Adobe Illustrator imported in BirdFont:

You can see a sample with custom icons here.

How fonts/ icons are used in the skin CSS

Defines which font will be imported and used for the button icons. IMPORTANT: you need to change “font-family” when using a custom font, otherwise you will break existing skins using this font.
[fsi-skin-path] refers to the location of your custom skin CSS – usually, this is WEBAPPS/fsi/viewer/skins/ of your FSI Server installation.

These classes define the individual button icons. As mentioned before, we assign the content as an Unicode character, so each icon is basically in place of a normal font character (a,b,c,d,e…).

Overview of button IDs for FSI Viewer JS/ FSI Pages JS

As you can see in the step above, the icons are defined by stating the indivdual button IDs in the CSS.

FSI Viewer JS currently uses the following button IDs:

  • Reset
  • ZoomOut
  • ZoomIn
  • MouseMode_0
  • MouseMode_1
  • MouseMode_2
  • MaxZoom
  • HotSpots
  • ToggleAutoSpin
  • ToggleFullScreen

FSI Pages JS currently supports the following button IDs:

  • PrintPage
  • FirstPage
  • PreviousPage
  • PageInputEnter
  • NextPage
  • LastPage
  • ToggleBookmarkList
  • ToggleBookmark
  • ToggleTableOfContents
  • TogglePageIndex
  • ToggleFullScreen

Example with custom icons

If you click the button you can see a FSI Viewer JS which uses a custom font with custom icons.

View FSI Viewer JS Sample with custom font/icons
Posted in: