我正在创建一个使用谷歌材质图标的web应用程序。我使用的几乎所有图标都是默认的"填充"样式,其中1个是"轮廓"样式。我用以下CSS代码导入图标:
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|');
这将导入两个.woff字体文件,一个用于默认的"材质图标"字体系列,另一个用于"轮廓材质图标"系列。
假设我只使用了轮廓族中的一个图标,有没有办法只导入该特定图标,而不是导入整个集合(不在本地保存(?
感谢提供的任何帮助
要只导入"填充"字体,请从url中删除|Material+Icons+Outlined|
。
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
没有官方的CDN可以让你只从网上获取一张图片,所以你需要从图标库下载png或svg并自己托管。
请注意,每个字体文件只有大约60KB-80KB(点击下面的链接可以自己查看(,所以如果你这样做是为了提高加载时间,可能不会有太大的不同。
填充woff2轮廓woff2。
我遇到了类似的问题,但决定自己托管图标。
不想添加自定义字体,所以下载了图标,在SVG中编辑了fill="black"
参数以匹配我想要的颜色,并简单地在img标记<img src="assets/delete-icon.svg">
中使用它。