Office-ui-fabric-core 某些图标未显示

Question

我正在为 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 是加载失败的图标。

任何帮助表示赞赏。

Answer 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 .）。

如果您打开 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 -嵌入）。