Custom button icons

The FSI Viewer and FSI Pages skins can be easily customised via CSS to match the design of your website.

The Creating custom skins for FSI Viewer tutorial shows you the structure of the CSS file with an example custom skin.

This tutorial explains how to use custom icons for the FSI Viewer buttons, but the same steps apply to changing the FSI Pages buttons.

FSI Viewer Example​

How are the icons created?​

FSI Viewer comes with a default set of icons based on a font called FSI Viewer Glyph. Using fonts for the button icons allows us to use vector based icons, resulting 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 are assigned in the default FSI Viewer Glyph font:

By creating a custom font, you can add your own icons to personalise your skin.

Where to find the fonts​

The default font files are located in /_viewers/skins/resources/_fonts.

You can also place custom fonts in this location.

You can download the default fonts as well as the custom fonts shown here in the tutorial in our tutorial resources on GitHub.

How to create your own icons/fonts​

You can create your own fonts with icons using open source programs such as FontForge or BirdFont and then use them in the custom skin CSS. Typically, the icons are created in a vector based program such as Adobe Illustrator and then imported into the font program. Of course, it is also possible to create the icons directly in these programs.

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

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.
*/

@font-face {
  font-family: 'FSI Viewer Icons Custom';
  src: url('[fsi-skin-path]resources/_fonts/FSI Viewer Glyph Custom.woff2')
    format('woff2');
  src: url('[fsi-skin-path]resources/_fonts/FSI Viewer Glyph Custom.woff')
    format('woff');

  font-weight: normal;
  font-style: normal;
}

.fsi-skin-green .fsi-ui-button.Reset .fsi-ui-button-icon:before {
  content: '\0075';
}
.fsi-skin-green .fsi-ui-button.ZoomOut .fsi-ui-button-icon:before {
  content: '\0078';
}
.fsi-skin-green .fsi-ui-button.ZoomIn .fsi-ui-button-icon:before {
  content: '\0079';
}
.fsi-skin-green .fsi-ui-button.MouseMode_0 .fsi-ui-button-icon:before {
  content: '\0076';
}
.fsi-skin-green .fsi-ui-button.MouseMode_1 .fsi-ui-button-icon:before {
  content: '\0065';
}
.fsi-skin-green .fsi-ui-button.MouseMode_2 .fsi-ui-button-icon:before {
  content: '\0066';
}
.fsi-skin-green .fsi-ui-button.MouseMode_3 .fsi-ui-button-icon:before {
  content: '\0066';
}

.fsi-skin-green .fsi-ui-button.HotSpots .fsi-ui-button-icon:before {
  content: '\0068';
}
.fsi-skin-green .fsi-ui-button.MaxZoom .fsi-ui-button-icon:before {
  content: '\0071';
}
.fsi-skin-green .fsi-ui-button.ToggleFullScreen .fsi-ui-button-icon:before {
  content: '\0072';
}
.fsi-skin-green
  .fsi-ui-button.ToggleFullScreen.fsi-ui-button-active
  .fsi-ui-button-icon:before {
  content: '\0073';
}

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

Overview of button IDs for FSI Viewer / FSI Pages​

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

FSI Viewer currently uses the following button IDs:

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

FSI Pages currently supports the following button IDs:

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