フォントダウンロードを無効にしてIEにアイコンを提供するための良い解決策は何ですか？

Question

私が現在開発中のサイトでは、ブートストラップのグリフィコンをアイコンに使用しています。私は、サイトがフォントダウンロードが無効になっている場所（グループセキュリティポリシーを実装しているIE11のユーザー）で使用されることを発見しました。これらのアイコンを表示する必要があることを考えれば、フォントのダウンロードを有効にすることはできません。私はこれを行う方法を探しています。フォントのアイコンを削除し、IE11特定のフォールバックに を提供するために、画像スプライトで

使用条件付きコメントを（これらもIE11で動作しますか？）それらを交換

1. ：現時点では私は2つのオプションを参照してください

   この状況で他に何かできることはありますか、それとも2つの選択肢に限定されますか？

Answer 1

私のgotoワークフローはSVGスプライトを使用しています。ここ は私の設定です：クロスオリジンを許可するようにSVGStore（https://github.com/w0rm/gulp-svgstore）SVGタグ

使用SVG4Everybody（https://github.com/jonathantneal/svg4everybody）を経由して

埋め込みSVGを使ってSVGO（https://github.com/svg/svgo）

クリートSVGスプライトを使用して

• 最適化のアイコンリクエスト

私はgulpタスクを使って世話をします。

gulpfile.js

import gulp   from 'gulp'; 
import gulpSvgmin from 'gulp-svgmin'; 
import gulpSvgstore from 'gulp-svgstore'; 

const dirs = { 
    source: './source', 
    dest : './dist' 
}; 

gulp.task('svg:icons',() => { 
    return gulp.src(`${dirs.source}/assets/images/icons/**/*.svg`) 
    .pipe(gulpSvgmin()) 
    .pipe(gulpSvgstore()) 
    .pipe(gulp.dest(`${dirs.dest}/assets/images`)); 
}); 

index.htmlを

<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/icons.svg#ICON_ID"></use></svg> 

<script src="path/to/svg4everybody.js"></script> 

これはかなりうまく動作しますが、CSSを経由して、あなたのアイコンのスタイルを設定することができます。