Как добавить небулярные иконки в угловой проект? - PullRequest
Новая
       40

Как добавить небулярные иконки в угловой проект?

1 голос
/ 26 марта 2019

Я пытаюсь создать веб-приложение с Angular 7 и Nebular.

Поэтому я использовал схемы для установки Nebular: ng add @nebular/theme

Так что у меня есть nebular-icons внутри моего node_modulesи включен в мой package.json как зависимость: 

"dependencies": {
    ...
    "nebular-icons": "^1.1.0",
    ...
  },

Я также попытался добавить nebular-icons к стилям в angular.json: 

"styles": [
    "src/styles.scss",
    "node_modules/nebular-icons/scss/nebular-icons.scss"
],

Теперь, если я попытаюсь использоватьзначок, он все равно не будет отображаться.Например: 

<nb-layout-header subheader>
    <nb-actions>
      <nb-action icon="nb-home"></nb-action>
      <nb-action icon="nb-search"></nb-action>
      <nb-action icon="nb-edit"></nb-action>
    </nb-actions>
</nb-layout-header>

К сожалению, значки не отображаются.Я вижу только строки ("|"), которые разделяют значки nb-действий, но не сами значки.

Спасибо за помощь!

1 Ответ

0 голосов
/ 26 марта 2019

Я попытался повторить проблему и столкнулся с той же проблемой, что и вы.

Немного дальнейшего поиска показал, что мне пришлось установить еще несколько зависимостей , поэтому после их установки я получил следующую ошибку: (проверьте скриншот ниже)

enter image description here

Ошибка просто означает, что мы не можем получить доступ к файлам ttf, woff, svg, которые содержат фактический шрифт, поэтому в моем

Итак, в моем файле styles.css я просто вставил пути CDN к этим файлам ... 

@font-face{
font-family:nebular;
src:url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.eot?4ozerq");src:url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.eot?4ozerq#iefix")format("embedded-opentype"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.ttf?4ozerq") format("truetype"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.woff?4ozerq") format("woff"),url("https://cdn.jsdelivr.net/npm/nebular-icons@1.1.0/fonts/nebular.svg?4ozerq#nebular") format("svg");
font-weight:normal;
font-style:normal;
}

вы можете проверить полную демонстрацию здесь

...