Icons created using IcoMoon not displayed in PDF output

bennetty · Post by **bennetty** » Mon Jun 22, 2015 4:14 am

Hi,
I have created a help file that contains icons I created in IcoMoon. The icons display perfectly when I output to HTML5 but they don't display at all when I output to PDF.

I read a post that said multiple classes are not supported in PDF output and I was using multiple classes, so thought that this must be the problem. So to test this I created a very simple htm file containing some of my icons without multiple classes:

<body>
These are my icomoon icons:






</body>

Again these display fine in the HTML5 output but in the PDF they are just blank.

Has anyone else successfully created a PDF using IcoMoon icons?

Thanks
Nicola.

ChoccieMuffin · Post by **ChoccieMuffin** » Mon Jun 22, 2015 5:53 am

Have you defined these classes to have autonumber with the appropriate graphics as the bullet? Perhaps if you add the bit off CSS in the medium you use for print, we might be able to help pin it down.

bennetty · Post by **bennetty** » Mon Jun 22, 2015 6:04 am

Hi,
Thanks for your reply. Just to be clear these are not icons I use for bulleted lists. They appear in the middle of a set of instructions for example:

1. Select to take a snapshot of your desktop.

Hope this puts it into context.

Have you successfully used IcoMoon icons with PDF output? would be great to know if it is even possible.

Thanks
Nicola.

ChoccieMuffin · Post by **ChoccieMuffin** » Tue Jun 23, 2015 7:20 am

What format are your icons - png, jpg etc?

bennetty · Post by **bennetty** » Tue Jun 23, 2015 7:34 am

Hi,
They are not an image format. IcoMoon uses it's own font file to create the icons, a bit like font awesome if you are familiar with that.

Again, thanks for following this post, any help is welcome, I'm totally stuck with this one.

Cheers

Lydia · Post by **Lydia** » Wed Jun 24, 2015 1:33 am

Hi Nicola, I think thread viewtopic.php?f=13&t=20305&p=105494&hil ... df#p105494 has the same discussion on different type of icon fonts. BTW- I use foundation icons, which show fine in HTML5, but won't in PDF output.

bennetty · Post by **bennetty** » Wed Jun 24, 2015 3:04 am

Thanks Lydia,
I had already seen this thread. It's a bit disappointing that this goes back to 2006 and these icon fonts are still not supported in the PDF output. I'm going to contact Madcap directly on this.

I'm surprised more people are not using these font icons in their documentation and running into problems when outputting to PDF.

It would be great to hear from anyone else!

Cheers
Nic.

Lydia · Post by **Lydia** » Thu Jun 25, 2015 12:42 am

Hi Nicola, my idea is that icon fonts were 'invented' for webpages specifically. And so support for other media isn't there, maybe isn't requested that much. It will be good to know what MadCap's idea is on this one. If you can and want to, please share that insight.
Thanks, Lydia.

alex · Post by **alex** » Fri Jun 26, 2015 9:54 am

bennetty wrote:Thanks Lydia,
I had already seen this thread. It's a bit disappointing that this goes back to 2006 and these icon fonts are still not supported in the PDF output. I'm going to contact Madcap directly on this.

I'm surprised more people are not using these font icons in their documentation and running into problems when outputting to PDF.

It would be great to hear from anyone else!

Cheers
Nic.

Hi! I'm the writer of that post (viewtopic.php?f=13&t=20305&p=105494&hil ... df#p105494) , and I just wanted to point out that the "2006" you see is the date I joined the forum, not the date I posted my question

I posted the question in December 2014.

If you read through the responses in that thread, you'll see I was able to get the icons to display in the HTML5 and PDF (and Word) versions as long as they were not stacked, rotated, or otherwise manipulated. I don't know if IcoMoon works the same way that Font Awesome works, but if they have an online "cheatsheet" where you can copy the symbol and paste it into your help topic, you can then select the rectangle displaying as the icon placeholder and apply the font to it (provided you have installed the icon font as a font that you can select in Flare's "Font" field in the Home tab).

Hope that helps!

bennetty · Post by **bennetty** » Mon Jun 29, 2015 1:40 am

Hi,
Thanks for confirming that Alex. Unfortunately Icomoon does rely on you using css and code, there is no cheatsheet for you to copy and paste the icon and then apply the font

Lydia · Post by **Lydia** » Mon Jun 29, 2015 6:47 am

@Nicola - have you looked at https://icomoon.io/#docs/local-fonts ? Sounds much like what Alex is describing, for other fonts.

@Alex: when I want to use icon fonts for PDF and HTML5 output - would you conditionalize the icons and use css for HTML5 and local fonts for PDF?

bennetty · Post by **bennetty** » Mon Jun 29, 2015 7:17 am

Thanks for the link - looks interesting.

Plus it would be good to know if you should use css for HTML5 and local fonts for PDF output.

Many thanks everyone for your help with this. I WILL solve it!

MattyQ · Post by **MattyQ** » Mon Jun 29, 2015 8:59 am

EDIT: Dave Lee made a great point that if you employ font-face (which you probably are already if you're using icomoon or Font-Awesome or one of those), then the procedure I detail below should work for both the HTML5 and PDF Outputs, and you won't need to implement your icons in two different ways. To confirm it'll work, you should make sure that the font-family name you're creating using for @font-face matches the font-family that Flare is automatically parsing in when you use Insert Characters. As an example, here's the CSS for my icomoon implementation:

Code: Select all

@font-face {
  font-family: 'icomoon';
  src: url('../Fonts/icomoon.eot');
  src: url('../Fonts/icomoon.eot') format('embedded-opentype'), url('../Fonts/icomoon.woff') format('woff'), url('../Fonts/icomoon.ttf') format('truetype'), url('../Fonts/icomoon.svg') format('svg');
  font-weight: normal;
  font-style: normal; 
}

...and here is what the automatically-generated span looks like in Flare, when I use Insert Characters:

Code: Select all

<span style="font-family: 'icomoon'">X</span>

...where X is whatever the icon(s) is that I inserted.

As long as font-family in the first code block matches font-family in the second code block, then the icons should render correctly both in the PDF and the HTML5 outputs.

Original Post

bennetty wrote:Hi,
Thanks for confirming that Alex. Unfortunately Icomoon does rely on you using css and code, there is no cheatsheet for you to copy and paste the icon and then apply the font

Fortunately, that's not entirely true! We use icomoon stuff at work, also, and I have a workaround for this issue.

You can use Flare's Insert Characters tool to add the icomoon characters to replace existing spans use to input the icomoon font. -- Before you do, though, make sure to peek at the note at the top of this post.

There is a final added step of confirming that the icomoon font is embedded in the PDF so that way a user wouldn't need to install your font set to see the output. It's not too difficult to check, fortunately, but requires Acrobat (not just Acrobat Reader). You may be able to use a free third-party PDF tool to embed fonts, too, but I haven't investigated it.

First, inserting the icons:

icomoonwalkthrough1.png

Second, embedding the font in the PDF:

icomoonwalkthrough2.png

NOTE: You should only have to do this second procedure on a single icon! Once the font is embedded, the icons should work in every instance throughout the document.

It looks to me like Flare is already embedding the font when you use this method, but it may be worth testing it with and without performing the steps I've taken pics of in the second procedure.

The unfortunate part of the rework is having to Insert Characters wherever you've already included an icomoon span. That said, I saw the same problem in our documentation -- hopefully this can help you out, too.

Thanks to Dave Lee for his help with this.

alex · Post by **alex** » Mon Jun 29, 2015 12:23 pm

Lydia wrote:@Nicola - have you looked at https://icomoon.io/#docs/local-fonts ? Sounds much like what Alex is describing, for other fonts.

@Alex: when I want to use icon fonts for PDF and HTML5 output - would you conditionalize the icons and use css for HTML5 and local fonts for PDF?

We opted to go with the approach of creating snippets of font awesome icons, so this is what it looks like... This shows up beautifully in both HTML5 and PDF (and Word), so we had no need to create separate versions for print and online use. The only snag we hit, as I previously noted, was that we were forced to use png files of the icons that were rotated or stacked to get them to show up in the PDF version (which we did condition for print only, while using the font for the HTML 5 version). Thankfully, there are only a few of those exceptions in our project.

bennetty · Post by **bennetty** » Tue Jun 30, 2015 1:52 am

Thanks Matty, I'm going to look at your post in detail and using snippets is a great idea Lydia, not thought of that, shame I couldn't see your screen shot.

Post by **NorthEast** » Tue Jun 30, 2015 2:15 am

MattyQ wrote:NOTE: The reason you can't just insert icomoon fonts this way for HTML5 output is because this method relies on the font being present on the user's system. So it works great for generating PDFs because YOU have the font, but you still need to use the standard icomoon/Font-Awesome/Whatever implementation if you want the icons to display correctly when served through your HTML5 output.

If you have a font file (e.g. TTF, and other formats), then you could presumably use font-face to make it available in HTML5 output, so it can also be viewed by people who don't have the font installed locally.

Then you could use the same method for both PDF and HTML5, rather than having to insert icons in two different ways.

bennetty · Post by **bennetty** » Tue Jun 30, 2015 2:23 am

I am using @font-face in my css and that is why I expected it to work in both the HTML5 and PDF output but for some reason it doesn't display in the PDF?

Post by **NorthEast** » Tue Jun 30, 2015 2:38 am

bennetty wrote:I am using @font-face in my css and that is why I expected it to work in both the HTML5 and PDF output but for some reason it doesn't display in the PDF?

The font-face is only to make that font available for HTML5 in a browser, it'll have no effect on the PDF. If your font isn't being displayed when Flare builds the PDF, make sure the font (e.g. TTF file) is installed in Windows on your PC, and that you're using the correct font name (as it appears in Windows).

MattyQ · Post by **MattyQ** » Tue Jun 30, 2015 4:51 am

Dave Lee wrote:If you have a font file (e.g. TTF, and other formats), then you could presumably use font-face to make it available in HTML5 output, so it can also be viewed by people who don't have the font installed locally.

Then you could use the same method for both PDF and HTML5, rather than having to insert icons in two different ways.

That's a great point, Dave. The icomoon and Font-Awesome implementations that I'm familiar with already employ @font-face to serve the font. Embarrassed to say that I didn't think about the fact that if the inline font-family span being created by Flare when you insert characters matches the family name you've defined using @font-face, you should just be able to use the procedure I included for both outputs.

Thanks! Definitely a case of missing the forest for the trees in my case.

EDIT: I went ahead and updated the top of my first post with your catch. Thanks for that.

bennetty · Post by **bennetty** » Wed Jul 01, 2015 9:18 am

I can't get this to work at all. I am using the font-face in my css and I have installed the font in Windows but when I go to insert the character and select the required font, none are displayed to select. Also I have the added complication that these icons have additional styles such as their colour, background and size which is all controlled through css classes.

As I can't spend anymore time on this, I am going to take the easy but long-winded option and just take screenshots of the icons from our software and add those as images to my project.

Thank you to everyone who has posted on here. I am sure this will be most helpful to others.

Cheers
Nic.

alex · Post by **alex** » Wed Jul 01, 2015 9:49 am

bennetty wrote:Thanks Matty, I'm going to look at your post in detail and using snippets is a great idea Lydia, not thought of that, shame I couldn't see your screen shot.

if by "Lydia" you meant me (

), can you see the screenshot now? (scroll up to my post - hopefully you'll see it)

MadCap Software Forums

Icons created using IcoMoon not displayed in PDF output

Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output

Re: Icons created using IcoMoon not displayed in PDF output