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

【问题标题】：Office-ui-fabric-core some icons are not showingOffice-ui-fabric-core 一些图标没有显示
【发布时间】：2019-11-07 22:57:28
【问题描述】：

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

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

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" />

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

在 HTML 中使用正确的格式：

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

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

感谢任何帮助。

【问题讨论】：

标签： office365 office-js office-addins ms-project office-ui-fabric

【解决方案1】：

我注意到您正在导入的CSS 实际上没有“--MapLayers”类。尽管某些 Office UI 文档（例如：https://uifabricicons.azurewebsites.net/）显示 MapLayers 作为“FabricMDL2Icons”字体系列中的图标存在，但我认为它不存在，或者至少不在此字体系列的任何版本中其他文档使用：https://developer.microsoft.com/en-us/fabric#/styles/web/icons（您可以通过 MapLayers 搜索并注意在第二个站点上找不到它）。您还会注意到“MayLayers”图标是“\uE81E”，但我认为这仅在“Segoe MDL2 Assets”字体系列中（Windows 10 原生：https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font）。

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

基本上，如果您想使用 MapLayers 图标，您需要创建自己的 CSS MapLayers 类，该类使用“Segoe MDL2 Assets”作为字体系列并具有“\E81E”的内容。这是一个 hacky 演示，我在 codepen 中重载了 AADLogo 类以使其显示 MapLayers 图标：

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

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

【讨论】：

非常好，这是非常清晰的说明。谢谢！！

【解决方案2】：

我已经从链接中尝试了更多可用的图标

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

示例：背景颜色

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

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

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

这里的类是“ms-Fabric”

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

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

【讨论】：

该链接来自 Office UI Fabric React 库的图标类组件，该组件固有地为其图标集放置了所需的类嵌套。您使用的是 Fabric Core (vanilla js) 库。我认为 React 库的图标集是 Core 库在其文档页面上向您展示的任何内容的超集（或相同集），因为 React 库（需要/）使用相同的 CSS 样式表。但是，是的，我认为我的旧 Office Ui React 应用程序需要在根应用程序上放置“ms-Fabric”类。
感谢您的确认。我希望文档应该比混乱更清晰
实际上 dir="ltr" 是我的问题 - 只有几个图标丢失了 - 一旦我添加 dir="ltr" 丢失的图标又回来了