[解決済み] Bootstrap 4 - Glyphiconsの移行？

2022-03-17 13:12:27

質問

グリフィコンを多用するプロジェクトがあります。 Bootstrap v4では、グリフィコンフォントが完全に削除されています。

Bootstrap V4 に同梱されているアイコンに相当するものはありますか？

http://v4-alpha.getbootstrap.com/migration/

解決方法は？

の両方を使用することができます。フォントオーサムと GithubオクチコンをGlyphiconsの代替品として無償で提供しています。

Bootstrap 4では、LessからSassに変更されたので、フォントのSass（SCSS）をビルドプロセスに統合して、プロジェクト用の単一のCSSファイルを作成することができます。

また、以下をご参照ください。 https://getbootstrap.com/docs/4.1/getting-started/build-tools/ をクリックすると、ツールの設定方法が表示されます。

依存関係を管理するために使用するNodeをダウンロードしてインストールします。
ルートに移動する /bootstrap ディレクトリに移動し npm install を実行して、package.json に記載されているローカルな依存関係をインストールします。
Rubyのインストール、Bundlerのインストールは gem install bundler を実行し、最後に bundle install . これで、Jekyllやプラグインなど、Rubyの依存関係がすべてインストールされます。

フォント・オーサム

ファイルのダウンロードは https://github.com/FortAwesome/Font-Awesome/tree/fa-4
をコピーします。 font-awesome/scss フォルダーを /bootstrap フォルダーにコピーします。
SCSSを開く /bootstrap/bootstrap.scss で、このファイルの末尾に以下のSCSSコードを書き込んでください。

$fa-font-path: "../fonts"; @import "../font-awesome/scss/font-awesome.scss";
のフォントファイルをコピーする必要があることに注意してください。 font-awesome/fonts から dist/fonts によって設定されたパブリックフォルダ、または $fa-font-path 前のステップで
実行します。 npm run dist Font-Awesome を使ってコードを再コンパイルします。

Githubオクチコン

ダウンロードは https://github.com/github/octicons/
をコピーします。 octicons フォルダを /bootstrap フォルダー
SCSSを開く /bootstrap/bootstrap.scss で、このファイルの末尾に以下のSCSSコードを書き込んでください。

$fa-font-path: "../fonts"; @import "../octicons/octicons/octicons.scss";
のフォントファイルをコピーする必要があることに注意してください。 font-awesome/fonts から dist/fonts によって設定されたパブリックフォルダ、または $fa-font-path 前のステップで
実行します。 npm run dist を使用してコードを再コンパイルします。

グリフィコン

Bootstrapのサイトでは、次のように書かれています。

<ブロッククオート

Glyphicon Halflings セットから250以上のグリフがフォント形式で含まれています。Glyphicons Halflingsは通常、無料では入手できませんが、その制作者がBootstrap用に無料で提供しています。感謝の気持ちとして、可能な限りGlyphiconsへのリンクを含んでいただくことだけをお願いしています。

私の理解では、Bootstrapに限定してこれらの250グリフを無料で使用することができますが、バージョン3専用に限定されるものではありません。Bootstrap 4 でも使用できます。

フォントファイルを下記からコピーします。 https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
をコピーします。 https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss ファイルを bootstrap/scss フォルダ
scss /bootstrap/bootstrap.scss を開き、このファイルの末尾に以下のSCSSコードを書き込んでください。

$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";

実行する。 npm run dist を使ってリコンパイルします。

Bootstrap 4 はポスト CSS を要求していることに注意してください。オートプレフィクサーでコンパイルします。静的なSassコンパイラを使ってCSSをコンパイルしているときは、その後にAutoprefixerを実行する必要があるはずです。

Bootstrap 4 の SCSS との混在については、以下のページで詳しく説明しています。こちら .

また、上記のフォントをインストールするためにBowerを使用することができます。Bowerを使用すると、Font Awesomeは、あなたのファイルを bower_components/components-font-awesome/ また、Github Octiconsでは octicons/octicons/octicons-.scss をメインファイルとして使用する必要があります。 octicons/octicons/sprockets-octicons.scss .

上記のすべてによって、すべてのCSSコードが1つのファイルにコンパイルされ、HTTPリクエストが1回で済むようになります。また、CDNからFont-Awesomeフォントを読み込むこともでき、多くの状況でこれも高速になります。CDN上の両方のフォントは、フォントファイル（データ-uriの使用、古いブラウザではサポートされていない可能性があります）も含まれています。そのため、サポートする他のブラウザに応じて、どのソリューションがあなたの状況に最も適しているかを検討してください。

Font Awesomeについては、以下のコードを以下の場所に貼り付けてください。 <head> の部分を削除してください。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

また、次のことも試してみてください。フロントエンドのBootstrap 4 Webアプリを足場するYeomanジェネレーター Font AwesomeやGithub Octiconsを使ったBootstrap 4のテストはこちら。

[解決済み] Bootstrap 4 - Glyphiconsの移行？

質問

解決方法は？

関連

[解決済み] Bootstrap4でdivにスクロールバーを追加する

[解決済み] Bootstrap 3 Glyphiconsが動作しない