Бутстрап Глификон, не отображающийся в angular2

Я пытаюсь использовать бутстрап-глификоны в моем приложении angular2. Я установил bootstrap, используя команду npm install bootstrap --save Мой фрагмент кода

 <button *ngIf="pos.name == uname" type="button" class="btn btn-default       btn-sm delete" (click)="DeleteBulletin();">
   <span class="glyphicon glyphicon-trash glyph"></span>  Delete
 </button>

Я включил bootstrap в свой стильUrls- styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

Символ глифиза появляется, как показано,

Ответ 1

Boostrap 4 больше не поддерживает Glyphicons, вместо этого вы можете использовать Font Awesome:

npm install --save font-awesome

и добавьте файл CSS в ваш .angular-cli.json

"apps": [
          {
             ....
             "styles": [
                "styles.css",
                "../node_modules/bootstrap/dist/css/bootstrap.css",
                "../node_modules/font-awesome/css/font-awesome.css"
             ],
             ...
         }
       ]

],

Замените CSS-класс классами Font Awesome:

<i class="navbar-toggler-icon fa fa-bars"> </i>

перекомпилировать приложение: ng serve

Ответ 2

Вам нужно импортировать

<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

на ваш index.html

Ответ 3

Я установил bootstrap3 как npm install bootstrap @3 и начал работать

просто нужно добавить в angular -cli.json: -

   "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.css"
     ],

Ответ 4

Существует файл angular -cli-build.js корня проекта, если ваше приложение было эшафотом angular -cli (используя 'ng init 'или' ng new ').

angular -cli-build.js инструктирует сборку проекта (используя 'ng serve' или 'ng build'), чтобы разместить сторонние библиотеки в vendor > .

В папке распространения bootstrap имеется папка шрифты, где хранятся файлы глификонов. Эти файлы начальной загрузки также должны быть помещены в папку поставщика.

angular -cli-build.js:

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'bootstrap/dist/css/bootstrap.min.css',
      'bootstrap/dist/fonts/*'
    ]
  });
};

Для полноты процесса установки для начальной загрузки были следующие шаги:

Строка Commnad:

npm install bootstrap --save

index.html

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

Перезапустите 'ng serve' или просто перестройте с помощью 'ng build'

Вот результат источника страницы:

Ответ 5

Если вы используете Bootstrap 4, он не включает глификон в самостоятельной версии. Таким образом, вы можете использовать другой пакет значков, например FontAwesome, или установить Glyphicons отдельно.

Я использую FontAwesome и эти зависимости в моих случаях:

  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.9",
    "bootstrap": "4.0.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.9",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }

В HTML-шаблонах просто разместите такой код:

<i class="fa fa-refresh" aria-hidden="true"></i>

Ответ 6

если вы включаете файлы начальной загрузки через stylesUrls, это вызовет проблему, я не знаю почему, но я обнаружил, что borwser смотрит на другое место для глификонов.

@Component({
   moduleId: module.id,
   selector: 'app-projects',
   templateUrl: 'projects.component.html',
   styleUrls: ['projects.component.css','../../vendor/bootstrap/dist/css/bootstrap.min.css'],
   providers:[ProjectsService]
})

используя вышеописанный метод для вызова файла таблицы стилей bootstrap, вызывает следующую ошибку "GET http://localhost:4200/fonts/glyphicons-halflings-regular.woff"

то, что вы видите из ошибки, заключается в том, что браузер смотрит на localhost:4200/fonts/..., где он должен быть localhost:4200/vendor/bootstrap/dist/fonts/...

В любом случае обходным путем является то, что вы добавили папку dist загрузочного файла внутри angular-cli-build.js в массив vendorNpmFiles как 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' и удалите таблицу стилей загрузки из styleUrls.

затем добавьте в index.html следующую строку:

<link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

не забывайте ng serve или ng build

Ответ 7

Запустите

npm install glyphicons --save

и, пожалуйста, импортируйте глификоны в свой компонент

 import icons from 'glyphicons';
    var icons = require('glyphicons');
    console.info('This is' + icons.heart+ ' Glyphicons!')

Вы можете проверить один раз в консоли своего браузера.

Ответ 8

Совет с FontAwesome правильный, но только частично. Если вы просто будете следовать инструкциям FontAwesome, вы потерпите неудачу в проекте Angular.

Вместо этого проверьте подсказку на этой странице:

Font Awesome теперь имеет официальный Angular-компонент, который доступен для всех, кто хочет легко использовать наши иконки в проектах. Если вы используете Angular, вам нужен пакет angular-fontawesome или веб-шрифты с CSS.

Хорошо, это означает, что в Angular-проекте вам нужно использовать следующий пакет: Angular FontAwesome

Лучшей страницей, которую я нашел для себя, когда я использую NPM, была эта страница.

Так что в основном вам нужно:

Установите FontAwesome в NPM
Импортируйте модуль AngularFontAwesomeModule в ваш app.module.ts
Добавьте CSS в файл angular-cli.json

Подробности все описаны в ссылке выше.

Чтобы наконец добавить значок, вы можете добавить значок отключения питания в файле app.component.html:

Код:

<fa-icon [icon]="faPowerOff"></fa-icon>

И вам нужно добавить код в соответствующий файл app.component.ts:

Код:

    import { faPowerOff } from '@fortawesome/free-solid-svg-icons';
    ...
    export class AppComponent implements OnInit {
      faPowerOff = faPowerOff;
    ...

ОДНО ВАЖНОЕ ПРИМЕЧАНИЕ!

Помните, что вам нужно установить правильную версию AngularFontawesome в NPM для вашей версии Angular. Проверьте эту страницу для таблицы совместимости.

Я использовал Angular 5, поэтому мне пришлось установить его так:

npm install @fortawesome/[email protected]

Запись будет добавлена в ваш файл package.json.

Ответ 9

Я сделал так же, как @Sebastian Viereck. Но я сделал

npm install --save-dev @fortawesome/fontawesome-free

и на angular.json

"styles": ["node_modules/bootstrap/dist/css/bootstrap.css",
           "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
            "src/styles.css"
 ],

Похоже, у fontawesome новая платная версия