logo标签列表

我该如何使用Font Awesome图标来提高网站性能？

cssperformancefonts
3

我在我的 Web 应用程序中使用 Font Awesome。 虽然我在其中一个页面只使用一个图标，但所有的字体都会被下载，这会增加页面加载时间。 并且，如您在图像中所见（第二个字体文件），它有 80KB 的大小，需要 3 秒钟才能加载。

enter image description here

有没有方法来减小文件大小和加载时间？

子集化是一个好主意吗？

使用SVG呢？

https://icomoon.io/，创建自己的字体 - Skribja
也许Base64会不错？不过我不知道你如何加载。 - user5014677
使用CDN从https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css下载。 - Gerard
我正在将min.css文件包含在我的css文件夹中。您建议我使用CDN吗？CDN更快吗？ - Joseph
1个回答
1
你可以按照建议使用icomoon来减少加载时间。
如果页面中有很多重复出现的图标，比如在表格中，你可以使用font awesome所称的符号来减少渲染时间。
<i class="fas fa-edit" data-fa-symbol="edit"></i>
<i class="fas fa-trash" data-fa-symbol="delete"></i>

<div>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#edit"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
  <svg class="svg-inline--fa fa-w-20"><use xlink:href="#delete"></use></svg>
</div>

{{链接1：来源}}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接