Question

我正在开发的网站使用Bootstrap的glyphicons作为图标。我刚刚发现该网站将用于禁用字体下载的地方（使用IE11实现组安全策略的用户）。鉴于我需要显示这些图标，并且启用字体下载不是一种选择，我正在寻找可以做到这一点的方法。目前我看到两个选项：

删除字体图标并将其替换为图像精灵
使用条件注释（这些甚至可以与IE11一起使用吗？）来提供IE11特定的回退

在这种情况下我还能做些什么，还是仅限于这两种选择？

Answer 1

我的转到工作流程正在使用SVG精灵。这是我的设置：

使用SVGO（https://github.com/svg/svgo）
使用SVGStore（https://github.com/w0rm/gulp-svgstore）
通过SVG标记嵌入SVG
使用SVG4Everybody（https://github.com/jonathantneal/svg4everybody）允许跨源请求

我使用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设置图标样式。

在禁用字体下载的情况下向IE提供图标的好方法是什么？

1 个答案: