Office-ui-fabric-core некоторые значки не отображаются - PullRequest
0 голосов
/ 26 июня 2019

Я строю аддоны для 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" />

В панели задач проекта: состояние боковой загрузки

enter image description here

Использование правильного формата в HTML:

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

Примечание. Здесь MapLayers - это значок, который не удалось загрузить.

Любая помощь приветствуется.

Ответы [ 2 ]

2 голосов
/ 27 июня 2019

Я заметил, что импортируемый вами CSS на самом деле не имеет класса "--MapLayers".Хотя некоторая документация по пользовательскому интерфейсу Office (например, такая: 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 unicode character in Segoe MDL2 Assets

По сути, если вы хотите использовать значок MapLayers, вам нужно создать свой собственный CSS MapLayersкласс, который использует «Segoe MDL2 Assets» в качестве семейства шрифтов и имеет содержимое «\ E81E». Вот хакерская демонстрация, в которой я перегружал класс AADLogo в коде ручки, чтобы он отображал значок MapLayers: MapLayers icon with custom CSS

Однако я думаю,это будет работать только на ПК с Windows 10 (если ваш веб-сайт не включает семейство шрифтов Segoe MDL2 Assets в качестве ресурса?).Возможно, кто-то из команды пользовательского интерфейса Office может прокомментировать несоответствия между различными документами или если MapLayers скоро выйдет с обновлением версии семейства шрифтов или чем-то ...

Но если вы просто заинтересованы в полученииЧтобы отобразился значок MapLayers, я думаю, что вам нужно будет сделать следующее:
1. Создание собственного CSS-класса для него с "Segoe MDL2 Assets" в качестве семейства шрифтов
2. Используйте "\ E81E"в качестве контента CSS
2b.Непосредственно включите семейство шрифтов «Segoe MDL2 Assets» на свой сайт (что может или не может противоречить условиям обслуживания Microsoft: https://docs.microsoft.com/en-us/typography/fonts/font-faq#document-embedding).

0 голосов
/ 28 июня 2019

Я перепробовал еще несколько доступных значков по ссылке

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

Пример: BackgroundColor

enter image description here

Удивительно, но некоторые загружаются, некоторые снова не загружаются.

Затем я добавил следующий класс для моего родительского div. Затем отображались значки.

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

Здесь класс "ms-Fabric"

Примечание. Я загружаю ядро ​​матрицы из cdn через index.html.

Может быть, это поможет кому-то столкнуться с той же проблемой ..

...