Office-ui-fabric-core 一些图标没有显示

Question

我正在为 Project 构建 Office 插件。真的很奇怪，即使我使用了正确的图标名称，一些图标也没有显示

遵循官方文档中的所有内容

https://developer.microsoft.com/en-us/fabric#/get-started#fabric-core

和 CSS CDN

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css" />

在项目任务窗格中：侧加载状态

使用正确的格式 in HTML:

   <li class="ms-ListItem">
    <i class="ms-Icon ms-Icon--MapLayers"></i>
    <span class="ms-font-m ms-fontColor-neutralPrimary">Export *****"

注意：这里的MapLayers是加载失败的图标。

感谢任何帮助。

Answer 1

我注意到您正在导入的 CSS 实际上没有“--MapLayers”class。虽然一些 Office UI 文档（例如这个：https://uifabricicons.azurewebsites.net/) shows MapLayers exists as an icon in the "FabricMDL2Icons" font family, I don't think it does, or at least not in whatever version of the font family this other documentation uses: https://developer.microsoft.com/en-us/fabric#/styles/web/icons (you can search by MapLayers and notice that it won't be found on this 2nd site). You'll also notice that the "MayLayers" icon is '\uE81E', but I think that's only in the "Segoe MDL2 Assets" font-family (which is native to Windows 10: https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font）。

如果你打开Windows10的字符映射表，更改字体系列，然后导航到U+E81E，你就会找到它！

基本上，如果您想使用 MapLayers 图标，您需要制作自己的 CSS MapLayers class，使用 "Segoe MDL2 Assets" 作为 font-family 和内容为“\E81E”。这是一个 hacky 演示，我在代码笔中重载了 AADLogo class 以使其显示 MapLayers 图标：

但是，我认为这只适用于 Windows 10 台 PC（除非您的网站包含 Segoe MDL2 资产 font-family 作为资源？）。也许 Office UI 团队的某个人可以评论各种文档之间的差异，或者 MapLayers 是否即将推出 font-family 版本升级或其他...

但是如果您只是想显示 MapLayers 图标，我认为您需要执行以下操作：
1. 用 "Segoe MDL2 Assets" 作为 font-family
制作你自己的 CSS class 2. 使用“\E81E”作为CSS内容
2b.直接在您的站点中包含 "Segoe MDL2 Assets" font-family（这可能违反也可能不违反 Microsoft 的服务条款：https://docs.microsoft.com/en-us/typography/fonts/font-faq#document-embedding）。

Answer 2

我尝试了 link

中的几个可用图标

https://developer.microsoft.com/en-us/fabric#/styles/web/icons

示例：背景颜色

令人惊讶的是，有些正在加载，有些则不再加载。

然后我为我的 parent div 添加了以下 class。然后显示图标。

<body class="ms-Fabric" dir="ltr">
  <span class="ms-font-su ms-fontColor-BackgroundColor">Big blue text</span>
</body>

这里class是"ms-Fabric"

注意：我正在通过 index.html 从 cdn 加载结构核心。

可能这会帮助一些面临同样问题的人..

Office-ui-fabric-core 一些图标没有显示

Office-ui-fabric-core some icons are not showing

office365

office-js

office-addins

ms-project

office-ui-fabric