I encountered a problem, that it displays only empty square boxes instead of nice (custom font) images from generated Office UI Fabric icons set, since I change the state of the with the web-part to checked-in state.

I have checked in google chrome developer tools,that the style inside icons-likes-inline.css is presented there (including the @font-face element), but it shows the square box(es)! And since I checked out the page and leave the edit mode I can see the icons again... ??

in detail: the css is added through custom Item_DisplayTemplate (I have tried to do it also in paired Control_DisplayTemplate.html)

 $includeCSS(this.url, "~sitecollection/Style Library/MyCustomFeature/fabric-icons-likes-inline.css");

(the icons-likes-inline.css is published, also the Item_DisplayTemplate.html is e.g. in published/ or just in checked-in states)

The picture below shows the several screen shots from the chrome developer tools grabbed in time it was ok - and then comparing it in page checked-in state the developer tool produces the exactly the same results in all) ??

sp online custom font square box troubles

(Also didn't work in IE.) Any Idea?

1 Answer 1


Using of non-inline variant has helped.

$includeCSS(this.url, "~sitecollection/Style Library/MyCustomFeature/fabric-icons-likes.css");

I don't know why exactly it works. It could be, that the (asynchronous) fetching the font data helped. Then it could mean, that $includeCSS does not work with the custom inline fonts perfectly well - the CSS part might not well prepared at moment of AddPostRenderCallback when trying to update the page DOM structure.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.