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.
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
The default font files can be found here: /fsi/web/viewer/skins/resources/_fonts.
In this location custom fonts can be placed as well.
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:
How fonts/ icons are used in the skin CSS
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