web-dev-qa-db-ja.com

Bootstrap angle2でグリフィコンが表示されない

Angular2アプリでbootstrapグリフィコンを使用しようとしています。npm install bootstrapコマンドを使用して、bootstrap- -私のコードスニペットは

 <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にstyleUrls- styleUrls：['node_modules/bootstrap/dist/css/bootstrap.min.css'、 'app/home.component.css']を含めました。

グリフィコンは次のように表示されます enter image description here

csstwitter-bootstrapwebangularglyphicons
19
Sahana ys

Boostrap 4サポートしないグリフィコンは、代わりに 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

16
Sebastian Viereck

インポートする必要があります

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

9
supersonic

Bootstrap3をnpm install bootstrap @ 3としてインストールし、動作を開始しました

単にangle-cli.jsonを追加する必要があります-

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

アプリケーションがangular-cli（によって足場されている場合、プロジェクトのルートのangular-cli-build.jsファイルがあります（ 「ng init」または「ng new」を使用）。

angular-cli-build.jsは、プロジェクトのビルドを指示し（「ng serve」または「ng build」を使用）、サードパーティライブラリをに配置しますvendorフォルダー。

グリフィコンファイルを保持するbootstrap配布フォルダーに、fontsフォルダーがあります。これらの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/*'
    ]
  });
};

完全を期すために、bootstrapのセットアッププロセスは以下のいくつかの手順で行いました。

コマンドライン：

npm install bootstrap --save

index.html：

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

「ng serve」を再起動するか、単に「ng build」で再構築します

ページソースの結果は次のとおりです。

Glyphicon with trach glyph

3
David

Bootstrap 4を使用している場合、セルフリリースにはグリフィコンは含まれません。したがって、FontAwesomeなどの別のアイコンパッケージを使用するか、グリフィコンを個別にインストールする必要があります。

私は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>
2
Pax Beach

style_rlsでbootstrapファイルを含めると問題が発生しますが、理由はわかりませんが、ブラウザがグリフィコンの別の場所を見ることがわかりました。

@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ファイル内のbootstrapのvendorNpmFilesフォルダーを'bootstrap/dist/**/*.+(js|css|eot|ttf|woff|woff2)'として追加し、bootstrapを削除することです。 styleUrlsのスタイルシート。

次に、index.htmlに次の行を追加します。

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

ng serveまたはng buildを忘れないでください

1
AliAwwad

実行してください

npm install glyphicons --save

そして、コンポーネントにグリフィコンをインポートしてください

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

ブラウザコンソールで1回確認できます。

0
Samudrala Ramu

FontAwesomeのアドバイスは正しいですが、一部だけです。 FontAwesomeの指示に従えば、Angularプロジェクトで失敗します。

代わりに このページ のヒントを確認してください。

Font Awesomeには、プロジェクトで簡単にアイコンを使用したいすべての人が利用できる公式のAngularコンポーネントがあります。 Angularを使用している場合は、angular-fontawesomeパッケージまたはCSS付きWebフォントが必要です。

[OK]これは、次のパッケージを使用する必要があるAngularプロジェクトでを意味します： Angular FontAwesome

NPMを使用しているときに見つけた最高のページは このページ です。

したがって、基本的には次のことが必要です。

  1. NPMにFontAwesomeをインストールする
  2. app.module.tsにモジュールAngularFontAwesomeModuleをインポートします
  3. CSSをangular-cli.jsonファイルに追加します

詳細はすべて上記のリンクで説明されています。

  1. 最後にアイコンを追加するには、app.component.htmlファイルに電源オフアイコンを追加します。

コード：

<fa-icon [icon]="faPowerOff"></fa-icon>
  1. また、関連するapp.component.tsファイルにコードを追加する必要があります。

コード：

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

1つの重要な注意！

AngularバージョンのNPMに正しいバージョンのAngularFontawesomeをインストールする必要があることを認識してください。互換性テーブルについては、 このページ を確認してください。

Angular 5を使用したため、次のようにインストールする必要がありました。

npm install @fortawesome/[email protected]

その後、エントリがpackage.jsonファイルに追加されます。

0
Invest

@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には新しい有料版があるようです

0
elranu