Skip to main content
raylangivens
raylangivens
Known Participant
August 3, 2018
Question

Custom font icons don't render when I publish a structured Frame file as HTML5 help

  • August 3, 2018
  • 1 reply
  • 501 views

We have a custom font set installed on Windows that we use to display icons specific to an application. I'm working with a test file in structured Frame to make sure the output generates as expected. When I print the structured Frame file (.xml file) containing the custom icon font to PDF (using the Adobe PDF printer to create a PostScript file and then the Distiller to generate the PDF), the icons render as expected. (I am using Windows 10 1803, with the latest patch.)

When I publish the same file as HTML5 help, the icons don't render. The name of the icon is displayed instead -- for example, "delete-icon" is shown instead of an image of a wastebasket.

Matt from Adobe suggested the following:

"Your HTML5 issue can be resolved if you post the images in question on your server, then modify the CSS to use them."

These aren't "images" per se. They are icons in a custom font set.

I need instructions for:

  • Posting the icon font set to the server (I suspect someone on the Dev side will need to do this)
  • Modifying the CSS to use the custom icon font. Please post an example showing how to do this in the CSS file.

Thank you --

Kathe

This topic has been closed for replies.

1 reply

Matt-Tech Comm Tools
Community Expert
Matt-Tech Comm ToolsCommunity Expert
Community Expert
August 6, 2018

Hi Kathe,

Sorry but I don't have any samples at the ready. When I have done this in the past, I've relied upon "CSS Cookbook" and "CSS Complete Reference" from O'Reilly to accomplish.

The things I suggested are more for web pros than tech comm, so you may have to engage someone within or outside of your company to implement.

-Matt

-Matt Sullivan, FrameMaker Course Creator, Author, Trainer, Consultant
raylangivens
raylangivensAuthor
Known Participant
August 6, 2018

Hi Matt,

Well, thanks for the references. I do plan to work with the UI designer of the app that uses the custom icon font. Hopefully he'll be able to help.

Kathe

    Ian Proudfoot
    Ian Proudfoot
    Legend
    August 6, 2018

    Hi Kathe,

    This can be done using @font-face in the CSS. I've used it in the past with an OTF icon font that I created. Seems to work very well for my client. Here's a good reference for how to do it:

    CSS @font-face Rule

    Good luck

    ~ Ian

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices