Icon fonts could not be shown in my generated HTML file


I create a complex axure file which includes some icon fonts. I can see these icon fonts in my axure file, but when I preview it or generate to html file, these icons could not be shown correctly. I set some of these icons in dynamic panel or covered by dynamic panel.

Then I try to copy these icon fonts only to a new axure file (in this file, only includes icon fonts), And I can see them correctly when I preview this new file.

I don’t know why this issue happened. So I’d like to ask you. Thank you.

Kind Regards

Hmm, it sounds like the icons display correctly in a brand new file, but in your main project they only display on the canvas, not in the browser. I can think of a couple of reasons why this might be the case:

  1. Do you have any fonts set for the page in your prototype? If you put focus on the canvas, click the “Style” tab of the inspector pane, and check the font droplist under “Sketch Effects”, is this set to something other than “Applied Font”? If so, then this would be overriding the font needed to properly render your icon font. If you happen to have a font selected in that droplist and also have the “View > Show Sketch Effects” option disabled in your Axure RP settings, then this would result in you not seeing the modified font on the canvas, but seeing it in the browser (i.e. the icon would look right on the canvas but render as a box due to using the wrong font in the browser).

  2. Alternatively, if you’re seeing the icon font render incorrectly across the whole file instead of just on one page, then it sounds like you may have some font mapping set up that is mapping the icon font to the incorrect font. You can check this via “Publish > Generate HTML Files > Font Mapping”.

Hopefully that helps! Feel free to attach a copy of the affected file (or email it to support@axure.com) if you’re still running into trouble.