代码之家 › 专栏 › 技术社区 › Ragavan Rajan

Office ui结构核心部分图标未显示

office-ui-fabric ms-project office-addins office-js office365

0

Ragavan Rajan · 技术社区 · 7 年前

我正在为这个项目建立office插件。这真的很奇怪,即使我使用正确的图标名称一些图标没有显示

从官方文件开始

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

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

感谢您的帮助。

0 回复 | 直到 7 年前

1

5

mirage 7 年前

我注意到 CSS 您要导入的实际上没有“--MapLayers”类。尽管有些Office UI文档(例如: https://uifabricicons.azurewebsites.net/ )显示MapLayers作为图标存在于“FabricMDL2Icons”字体系列中,我不认为它存在,或者至少不存在于其他文档使用的字体系列的任何版本中: https://developer.microsoft.com/en-us/fabric#/styles/web/icons https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font

如果你打开windows10的字符映射,改变字体系列,然后导航到U+E81E,你就会找到它!

不过,我认为这只适用于Windows10 PC(除非您的网站包含SegoeMdl2资产字体系列作为资源?)。也许来自officeui团队的人可以对各种文档之间的差异发表评论,或者如果MapLayers很快就要进行字体系列版本升级之类的事情。。。

但是,如果您只是想让MapLayers图标显示出来,我认为您需要执行以下操作:

2.使用“\E81E”作为CSS内容
第2b条。在您的站点中直接包含“Segoe MDL2 Assets”字体系列(这可能违反或不违反Microsoft的服务条款: https://docs.microsoft.com/en-us/typography/fonts/font-faq#document-embedding

2

1

Ragavan Rajan 7 年前

示例:BackgroundColor

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

然后我为我的父div添加了下面的类。

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

这里的课程是“ms Fabric”

也许这会帮助一些面临同样问题的人。。