search

OfficeDev / office-ui-fabric-core

The front-end CSS framework for building experiences for Office and Microsoft 365.
https://developer.microsoft.com/en-us/fabric
Other
3.77k stars 467 forks source link

CompanyDirectory icon not working #1097

Closed larnera closed 6 years ago

larnera commented 6 years ago

Hi. Is there a list of all available icons that can be used in version 2.64?

I've been looking through the website and it seems that there are many missing from 2.64. For example, 'CompanyDirectory' isn't there...

I've tried looking through this repo and I can't see anything that lists all of the ones that can be used.

Many thanks, Adam

Jahnp commented 6 years ago

Hey @larnera, the website is currently a little bit behind the latest release of Fabric Core. We're working through some deployment snags that have been preventing us from updating the site recently, but we're aiming to have that resolved as soon as possible. There are other fixes & improvements to the site we want to get out, so believe me, we're pushing on it!

mikewheaton commented 6 years ago

You'll find a full list of the available icons in icon.json.

This will show the latest icons by default. To view icons that were available in a specific release, you can search for a specific branch like release/4.0.0: image

larnera commented 6 years ago

Thanks @Jahnp and @mikewheaton for the information. I've been through that JSON file and 'CompanyDirectory' is there but when I include it, it just doesn't load in the browser. I've found this with some of the others that are referenced in the JSON file.

Danny-Engelman commented 6 years ago

I got my own Icon tracker (only in Chrome) which tracks new icons: https://365csi.nl/toolkit/iconator/

Icon CompanyDirectory is available since 9.2.0

larnera commented 6 years ago

Thanks @Danny-Engelman. 'CompanyDirectory' just doesn't show. All the other icons added 9.2.0 show perfectly. I'll have to use another icon.

mikewheaton commented 6 years ago

I've verified that the CompanyDirectory icon isn't working: https://codepen.io/mikewheaton/pen/MQpJVM

It seems like it may have been added to the tool we use to generate icon classes, but not the font itself. I'll look into this.

Danny-Engelman commented 6 years ago

Mike's codepen loads: https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons-2.55.woff2

My Iconator loads: https://static2.sharepointonline.com/files/fabric/assets/icons/fabricmdl2icons-2.64.woff2

mikewheaton commented 6 years ago

The CodePen example uses Core 9.2.0, which included version 2.55 of the icon font. This should have been where CompanyDirectory was first added. The latest release, Core 9.4.0, uses version 2.64 of the icon font.

mikewheaton commented 6 years ago

One thing I've noticed is that in recent versions of Fabric, the icon tool we use has been outputting an encoded character rather than the ASCII code.

In version 7.0.0:

.ms-Icon--BranchFork::before {
  content: '\F173';
}

In 9.2.0:

.ms-Icon--BranchFork::before {
  content: 'ï…³';
}

I can't explain why only this icon is affected, but it may be related. It's clearly in the icon font because it works in @Danny-Engelman's icon tool.

mikewheaton commented 6 years ago

It turns out to be a simpler issue. The CompanyDirectory icon has a corresponding CompanyDirectoryMirrored icon, for use in pages displayed in right-to-left (RTL) languages. So the CompanyDirectory class only works if the dir attribute has been set on the page:

<body dir='ltr'> ...left-to-right content... </body>

I've updated the CodePen from earlier to demonstrate that it's now working as expected: https://codepen.io/mikewheaton/pen/MQpJVM