Local Copy of Fabric Core Styles Not Loading Icons

Question

Local Copy of Fabric Core Styles Not Loading Icons

Opened this issue 6 years ago · 4 comments

Please provide a reproduction of the bug in a codepen:

Bug Report

Package version(s):

"@uifabric/icons@>=5.8.0 <6.0.0":
  version "5.8.0"
  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons- 
  5.8.0.tgz#fb7e4476a88e5b6ea1d121163f924bbc35a02b28"
  integrity //omitted//
  dependencies:
    "@uifabric/styling" ">=5.30.1 <6.0.0"
    tslib "^1.7.1"

"@uifabric/merge-styles@>=5.17.1 <6.0.0":
  version "5.17.1"
  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-5.17.1.tgz#9325817069011efb5f425e0fd163a975d9a12a3c"
  integrity //omitted//
  dependencies:
    tslib "^1.7.1"

"@uifabric/styling@>=5.30.1 <6.0.0", "@uifabric/styling@>=5.36.0 <6.0.0":
  version "5.36.0"
  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-5.36.0.tgz#46d53b501703346ee85fea39d06705bb25db8d04"
  integrity //omitted//
  dependencies:
    "@microsoft/load-themed-styles" "^1.7.13"
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    "@uifabric/utilities" ">=5.34.1 <6.0.0"
    tslib "^1.7.1"

"@uifabric/utilities@>=5.34.1 <6.0.0", "@uifabric/utilities@>=5.34.2 <6.0.0":
  version "5.34.2"
  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-5.34.2.tgz#78eb1b42cebf361ce3de07f99c99c7c18ea2f555"
  integrity //omitted//
  dependencies:
    "@uifabric/merge-styles" ">=5.17.1 <6.0.0"
    prop-types "^15.5.10"
    tslib "^1.7.1"

Browser and OS versions:
(not relevant)

Priorities and help requested:

Are you willing to submit a PR to fix?
No

Requested priority:
Normal

Products/sites affected:
Any

Describe the issue:

When using a downloaded copy of the styles found at https://github.com/OfficeDev/office-ui-fabric-core/releases (file directory & name: fabric-core-9.6.1\css\fabric.min.css), I'm unable to get icons to load that (usually) DO work when referencing the CDN copy of the same file.

Actual behavior:

Button with no icon is rendered when when the following code is added:
<a href="https://myapps.microsoft.com/" className="o365-button" target="_blank"><i className="ms-Icon ms-Icon--WaffleOffice365" aria-label="Access Office 365 Applications"> </i></a>

Expected behavior:

Button with icon is rendered when when the following code is added:
<a href="https://myapps.microsoft.com/" className="o365-button" target="_blank"><i className="ms-Icon ms-Icon--WaffleOffice365" aria-label="Access Office 365 Applications"> </i></a>

As a cross-reference, I had originally started this bug report over at microsoft/fluentui#6839 before realizing that the correct place to post it would be here

Answer 1 · 2018-10-25T19:44:41.000Z

I've created a repro here: https://codesandbox.io/s/p2z0v7mzm

This looks to be working fine, although that's not unexpected as you mentioned that the issue is intermittent for you.

In StackOverflow, you wrote that when the icon is missing you don't see the Fabric Core stylesheet in the network tab. For the file not to show in the network tab at all (as opposed to a failed request for it) makes me think there's some issue with the underlying page. How does your application add the stylesheet? I'm wondering if it's being injected at runtime, rather than being part of index.html or similar.

Answer 2 · 2018-10-26T15:48:43.000Z

@mikewheaton your repro uses the CDN reference whereas my bug is referring to what happens when you...

Navigate to https://developer.microsoft.com/en-us/fabric#/get-started#core, scroll down to "Other ways to get Fabric Core" & click the " download a copy of Fabric for your project" link
Download the copy available at https://github.com/OfficeDev/office-ui-fabric-core/releases/tag/9.6.1
Include that copy at the bottom of the element within the index.html file that runs the app as follows:

<link rel="stylesheet" href="/fabric.min.css">

Note: I understand the inclusion of my larger scenario/preface from StackOverflow may have confused my purpose in filing this bug, so I will remove that reference from my OP for clarification purposes. I apologize for the confusion.

Answer 3 · 2018-10-26T16:23:03.000Z

Of course, it should be the same whether you're loading from your own server or the CDN. But I guess that's not the case. Is there a reason you're not able to use the CDN? You could try placing the link tag at the very top without your page's head tag. This should force the browser to download the styles before rendering the page, which may prove more reliable.

Answer 4 · 2018-10-26T19:45:18.000Z

@mikewheaton - Essentially, I was attempting to use the stylesheet locally as a means of ruling out potential issues with grabbing it from the CDN. My expectation was that it would work exactly the same or better (insofar as if there was some kind of issue connecting to the CDN copy, it'd be bypassed), but the fact that it was consistently NOT working surprised me.

As far as trying it at the top, it's as far up as I can put it in the codepen I referenced in the OP (granted, there's not a dedicated head element in that pen) & I unfortunately get the same results locally when I move it from the bottom of the head element to the top of the head element.