web-dev-qa-db-de.com

Bootstrap Glyphicons werden nicht in angle2 angezeigt

Ich versuche, Bootstrap-Glyphicons in meiner angle2-App zu verwenden. Ich habe bootstrap mit dem Befehl npm install bootstrap --saveMein Code-Snippet installiert 

 <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>

Ich habe Bootstrap in meine styleUrls -.__ aufgenommen. styleUrls: ['node_modules/bootstrap/dist/css/bootstrap.min.css', 'app/home.component.css']

Das Glyphikon erscheint wie gezeigt-  enter image description here

14
Sahana ys

Du musst importieren 

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

zu Ihrem index.html

9
supersonic

Boostrap 4 unterstützt nicht mehr Glyphicons, Sie können stattdessen Font Awesome verwenden:

npm install --save font-awesome

und fügen Sie die CSS-Datei zu Ihrem .angular-cli.json hinzu

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

],

Ersetzen Sie die CSS-Klasse durch die Font Awesome-Klassen:

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

app neu kompilieren: ng serve

5

Ich habe bootstrap3 als npm install bootstrap @ 3 installiert und es fing an zu arbeiten

sie müssen nur in angle-cli.json hinzufügen: -

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

Die Datei angle-cli-build.js des Stammverzeichnisses des Projekts ist vorhanden, wenn Ihre Anwendung von angle-cli (mit 'ng init' oder 'ng new') erstellt wurde.

angle-cli-build.js weist den Build des Projekts an (mithilfe von "ng serv" oder "ng build"), um Drittanbieter-Bibliotheken im Ordner vendor abzulegen.

Im Bootstrap-Distributionsordner befindet sich der Ordner fonts, der Glyphicons-Dateien enthält. Diese Bootstrap-Dateien müssen auch im Herstellerordner abgelegt werden. 

angle-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/*'
    ]
  });
};  

Der Vollständigkeit halber wurde in den folgenden Schritten der Installationsvorgang für Bootstrap ausgeführt:

Commnad-Zeile:

npm install bootstrap --save

index.html:

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

'Ng serv' neu starten oder einfach mit 'ng build' neu erstellen 

Hier ist das Ergebnis der Seitenquelle:

 Glyphicon with trach glyph

3
David

wenn Sie Bootstrap-Dateien über styleUrls einbinden, wird dies zu einem Problem. Ich weiß nicht warum, aber ich habe festgestellt, dass der Browser an einem anderen Ort nach Glyphicons sucht.

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

die Verwendung der obigen Methode zum Aufrufen der Bootstrap-Stylesheet-Datei verursacht den folgenden Fehler "GET http: // localhost: 4200/fonts/glyphicons-halflings-regular.woff "

was Sie an dem Fehler erkennen können, ist, dass der Browser auf localhost:4200/fonts/... schaut, wo er localhost:4200/vendor/bootstrap/dist/fonts/... sein sollte.

eine Problemumgehung besteht jedoch darin, sicherzustellen, dass Sie den dist-Ordner von bootstrap in angular-cli-build.js-Datei im vendorNpmFiles-Array als 'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)' hinzugefügt und das Bootstrap-Stylesheet von styleUrls entfernt haben.

fügen Sie dann zur index.html die folgende Zeile hinzu:

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

vergiss nicht ng serve oder ng build

1
AliAwwad

Wenn Sie Bootstrap 4 verwenden, wird Glyphicon nicht in die Selbstveröffentlichung aufgenommen. Sie können also ein anderes Symbolpaket verwenden, z.

Ich verwende FontAwesome und diese Abhängigkeiten in meinen Fällen:

  "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"
  }

Platzieren Sie in HTML-Vorlagen einfach einen solchen Code:

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

Bitte renne 

npm install glyphicons --save

und importieren Sie bitte Glyphicons in Ihre Komponente

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

Sie können einmal in Ihrer Browser-Konsole nachsehen.

0
Samudrala Ramu

Die Beratung mit FontAwesome ist richtig, aber nur teilweise. Wenn Sie einfach den Anweisungen von FontAwesome folgen, schlägt ein Angular) - Projekt fehl.

Überprüfen Sie stattdessen den Hinweis auf diese Seite :

Font Awesome hat jetzt eine offizielle Angular Komponente, die für alle verfügbar ist, die unsere Symbole einfach in Projekten verwenden möchten. Wenn Sie Angular verwenden, benötigen Sie das Paket Angular-fontawesome oder Web Fonts mit CSS.

Okay, das bedeutet In einem Angular Projekt müssen Sie das folgende Paket verwenden: Angular FontAwesome

Die beste Seite, die ich bei der Verwendung von NPM für mich gefunden habe, war diese Seite .

Grundsätzlich müssen Sie also:

  1. Installieren Sie FontAwesome in NPM
  2. Importieren Sie das Modul AngularFontAwesomeModule in Ihr app.module.ts
  3. Fügen Sie das CSS in die Datei angular-cli.json ein

Die Details sind alle im obigen Link beschrieben.

  1. Um schließlich ein Symbol hinzuzufügen, können Sie ein Ausschaltsymbol in die Datei app.component.html einfügen:

Code:

<fa-icon [icon]="faPowerOff"></fa-icon>
  1. UND Sie müssen den Code in die zugehörige app.component.ts Datei einfügen:

Code:

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

EIN WICHTIGER HINWEIS !

Bitte beachten Sie, dass Sie die richtige Version von AngularFontawesome in NPM für Ihre Angular Version installieren müssen. Überprüfen Sie diese Seite für die Kompatibilitätstabelle.

Ich habe Angular 5 verwendet, also musste ich es folgendermaßen installieren:

npm install @fortawesome/[email protected]

Der Eintrag wird dann zu Ihrer package.json Datei hinzugefügt.

0
Invest

Ich habe das gleiche gemacht wie @Sebastian Viereck. Hab ich doch

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

und auf der angle.json

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

Es sieht so aus, als ob fontawesome eine neue kostenpflichtige Version hat

0
elranu