导入特定材质的图标

我正在创建一个使用Google's Material Icons的Web应用程序。 我使用的几乎所有图标都是默认的“填充”样式,其中一个图标是“概述”样式。 我使用以下CSS代码导入图标:

@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|');

这将导入两个.woff字体文件,一个用于默认的“ Material Icons”字体系列,一个用于“ Material Icons Outlined”系列。

鉴于我只使用了概述系列中的1个图标,有没有办法仅导入该特定图标,而不是导入整个集合(不保存在本地)?

感谢您的帮助

xxingx 回答:导入特定材质的图标

要仅导入“填充”字体,请从网址中删除|Material+Icons+Outlined|

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

没有官方的CDN允许您从网络上获取一张图像,因此您需要从icon library下载png或svg并自己托管。

请注意,每个字体文件大约只有60KB-80KB(请点击下面的链接查看),因此,如果您这样做是为了缩短加载时间,则可能不会有太大的不同。

filled woff2 outline woff2

,

我遇到了类似的问题,但决定自己托管该图标。

不想添加自定义字体,因此下载了图标,在SVG中编辑了fill="black"参数以匹配我想要的颜色,并在img标签{{1}中使用了它}。

本文链接:https://www.f2er.com/2611237.html

大家都在问