- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 gulp-iconfont从一组 svg 图像构建图标字体。
我已经创建了 gulp 任务,并且在运行它时没有出现任何错误。但是我也无法获得每个图标的代码,这是我在 css 伪元素上使用图标所需要的。
控制台输出显示奇怪的字符,而 unicode 应该是:
这是我的 gulp 任务:
gulp.task('iconfont', function(){
gulp.src(['assets/icons/*.svg'])
.pipe(iconfont({
fontName: 'icon-font', // required
appendUnicode: true, // recommended option
normalize: true,
centerHorizontally: true,
fontHeight: 100,
formats: ['ttf', 'eot', 'woff'],
}))
.on('glyphs', function(glyphs, options) {
console.log(glyphs, options);
})
.pipe(gulp.dest('assets/fonts/'));
});
由于 appendUnicode
选项设置为 true,我可以在我的 svg 文件名的开头看到它,例如 uEA02-calendar.svg
。
但是,如果我尝试在我的 css 文件中使用它:
.calendar:before {
content: "uEA02";
speak: none;
font-style: normal;
font-weight: normal;
font-family: "icon-font"; }
我看到的是文本 uEA02 而不是我的图标。我已经检查过并且正在加载字体,我不知道我会在这里遗漏什么?
最佳答案
我通常将 gulp-iconfont 与 gulp-iconfont-css 配对。这个额外的包导出一个样式表,其中包含绑定(bind)到一个类的适当实体。您可以导出预处理的 css 或原始 css。
这是我的 gulp 任务。
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');
var glyphFontName = 'icon';
var stream = gulp.src('resources/assets/glyph/*.svg')
.pipe(iconfontCss({
fontName: glyphFontName,
path: 'node_modules/gulp-iconfont-css/templates/_icons.scss',
targetPath: '../../resources/sass/generated/' + glyphFontName + '.scss',
fontPath: '../fonts/',
cssClass: 'i',
centerHorizontally: true
}))
.pipe(iconfont({
fontName: glyphFontName,
formats: [
'ttf',
'eot',
'woff',
'woff2'
],
}))
.pipe(gulp.dest('public/fonts/'));
return stream;
关于css - 使用 gulp-iconfont 时无法获取字形代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33297107/
我在flutter中使用了iconfont,但是不能正常使用, 它看起来像一个“X”like this 我在pubsepc.yaml中定义: flutter: uses-material-desi
我的页面底部有五个链接。每个链接旁边是一个 带有 Font Awesome 心形图标类属性。我试图让图标在悬停在链接上之前不显示。我有几个问题: 1) Display: hidden不适用于图标。那是
这些天您在每个网站上都能看到这些 - 现在几乎没有没有它们。图标字体几乎已经“接管”了。但是创建这些工具是一个问题 - 至少对我来说是这样。 由于我有视力障碍,我与一位可以为我制作 SVG 字形的设计
刚开始学习网络开发。我了解如何使用 .classname a:hover{} 更改常规链接的悬停颜色,但我尝试过的每个变体都没有奏效。我认为我的图标有一些怪癖,因为我从 flat-icon.com 将
我想在我的元素中使用iconfont,并通过fontforge自定义字体文件。 我知道glyph可以在html或者css中被unicode引用,比如和 &::before{conten
我在 Web 应用程序的索引页上使用我的客户作为标题 Logo 提供的图标字体中的大图标。 Logo 占设备宽度的 60%,由一个大圆形 Logo (约占图标的 40%)和下面的文本组成,在纵向模式下
我正在从咕哝声过渡到 gulp 声,我在使用 gulp-iconfont 时遇到了问题用于创建我的图标字体和样式表的库。 依赖关系: "devDependencies": { "gulp": "^
我正在尝试使用 gulp-iconfont从一组 svg 图像构建图标字体。 我已经创建了 gulp 任务,并且在运行它时没有出现任何错误。但是我也无法获得每个图标的代码,这是我在 css 伪元素上使
我注意到当我放大导航时我的图标看起来不对。我正在使用 Gulp-iconfont(npm 包)和链接中描述的默认模板和样式。 我的 HTML: Rendered font .svg file
我正在使用 Bootstrap 字形图标和 FontAwesome 图标,遇到一个奇怪的错误,除非悬停在上面,否则它们不会显示,此时它们将永久可见。当我重新加载页面时,它们将不再可见。 这只发生在 C
我用 gulp-iconfont 创建了字体。有一堆 svg 图像。我可以在我的页面中看到它们,但它们太小了。我遗漏了一些明显但似乎找不到的东西。
我使用 Fontastic.me 创建了一个 iconfont。它在 Android 4.2.2 和 4.3 的 native 浏览器(例如:现代三星平板电脑)中运行良好。在这些浏览器中,整个字体的字
我通过 npm css 包导入了 iconfont.css,但是找不到 iconfont.woff 和 iconfont.tff。我该如何解决? 吞咽文件 var postcss = require(
所以,我正在使用 gulp-iconfont从 svg 图标生成图标字体。我用下一种方式设置了任务: gulp.task('iconfont', function(){ gulp.src(['sr
我是一名优秀的程序员,十分优秀!