Highlighted

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

Explorer ,
Aug 03, 2018

Copy link to clipboard

Copied

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

TOPICS
Structured

Views

135

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Aug 03, 2018

Copy link to clipboard

Copied

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

TOPICS
Structured

Views

136

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 03, 2018 0
Adobe Community Professional ,
Aug 06, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 06, 2018 0
Explorer ,
Aug 06, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 06, 2018 1
Enthusiast ,
Aug 06, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 06, 2018 0
Explorer ,
Aug 06, 2018

Copy link to clipboard

Copied

Thanks, Ian. We’ll try that. It will probably be a while before I can get back to you to let you know if it worked.

Kathe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 06, 2018 0