Foundation 提供了一套 图标 集合，叫做 Foundation Icon Fonts，这是一组由 字体图标 组成的图标，可以通过简单的 CSS 类来使用。图标非常适合响应式设计，因为它们可以根据需要进行缩放，而不会失真。

Foundation 提供了两种图标方案：

  1. Foundation Icons（基于图标字体的方案）
  2. SVG 图标（更现代的方案，适应性更强）

不过，在最新版本的 Foundation 中，推荐使用 SVG 图标，因为它们支持更多的特性，并且表现更好。

1. 使用 Font-based 图标

要使用 Foundation 图标字体，你需要引入对应的 CSS 和字体文件。

引入 CSS 文件（可以通过 CDN 或本地文件）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-icons@6.5.1/css/foundation-icons.css">

图标使用示例：

<i class="fi-telephone"></i>
<i class="fi-calendar"></i>
<i class="fi-home"></i>

2. 使用 SVG 图标

Foundation 推荐使用 SVG 图标，因为它们提供更高的质量，并且更容易自定义和扩展。SVG 图标是通过 <svg> 标签来嵌入的。Foundation 提供了很多可以直接使用的图标，你也可以自定义它们。

示例：使用 SVG 图标

<svg class="fi fi-home">
  <use xlink:href="#fi-home"></use>
</svg>

获取 SVG 图标集合： 你可以访问 Foundation 官方网站下载 SVG 图标集合：

常用图标示例：

  • 电话图标：fi-telephone
  • 日历图标：fi-calendar
  • 主页图标：fi-home
  • 搜索图标：fi-magnifying-glass
  • 设置图标：fi-widget
  • 购物车图标：fi-shopping-cart

图标的大小和颜色：

你可以通过 CSS 来控制图标的大小和颜色：

<!-- 设置图标的颜色和大小 -->
<i class="fi-telephone" style="font-size: 24px; color: blue;"></i>

查看完整的图标列表：

可以通过以下链接查看 Foundation 提供的图标集合：

如果你有其他问题，或者需要对某个图标做详细操作，随时告诉我！