如何只在使用图标时加载字体css？

在使用图标时，可以通过以下步骤只加载字体CSS：

1. 首先，确保你已经获取了字体图标的CSS文件和字体文件。通常，字体图标库会提供一个CSS文件和一个或多个字体文件。
2. 打开字体图标的CSS文件，查看其中的代码。通常，CSS文件会包含一些类似于.icon的选择器，用于指定字体图标的样式。
3. 将CSS文件中的所有代码复制到你的项目中的一个新的CSS文件中，命名为font-icons.css（或其他你喜欢的名称）。
4. 在新的CSS文件中，删除除了字体图标相关的代码以外的所有内容。这样做是为了减小文件大小，只保留必要的代码。
5. 将字体文件（通常是一个或多个.woff或.woff2文件）复制到你的项目中的一个新的文件夹中，例如fonts文件夹。
6. 在新的CSS文件中，将字体文件的路径更新为相对于你的项目的路径。例如，如果你的字体文件位于fonts文件夹下，可以使用相对路径../fonts/fontname.woff。
7. 在你的HTML文件中，将新的CSS文件链接到页面上。使用<link>标签将其引入，例如：<link rel="stylesheet" href="path/to/font-icons.css">
8. 现在，你可以在HTML中使用字体图标了。在需要使用图标的地方，添加一个具有相应类名的元素。例如，如果你的CSS文件中有一个.icon-home的类名，你可以这样使用：<i class="icon-home"></i>

这样，只有在使用图标的时候，浏览器才会加载字体CSS文件和字体文件，减少了不必要的网络请求和资源加载。