在网页设计中，图标通常使用 <i> 标签来包裹有几个主要原因：

1. 语义化较弱：<i> 标签原本用于表示斜体文本（italic），但在 HTML5 中，其语义化较弱。因此，它通常被重新用作图标的容器，因为图标本身通常没有特定的语义，只是用于装饰或增加可视化效果。

2. 兼容性和惯例：使用 <i> 标签来包裹图标已经成为一种惯例，特别是在使用一些流行的图标库如 Font Awesome 时。很多图标库的样式是默认应用在 <i> 标签上的，所以使用 <i> 标签可以减少样式的冲突和额外的样式配置。

3. 简洁的 HTML 结构：<i> 标签是一个行内元素，使用它可以保持 HTML 结构的简洁，不会影响其他布局或样式。相比其他块级元素，它更适合放置在文本行内或按钮内。

4. 样式应用的便利性：使用 <i> 标签可以很方便地应用 CSS 样式。例如，许多图标库会通过 CSS 类来控制图标的外观、大小、颜色等，而 <i> 标签非常适合用于这种情况。

5. 易于识别和维护：开发人员已经习惯于在看到 <i> 标签时，立即识别这是一个图标，从而在阅读和维护代码时更加直观。

虽然 <i> 标签广泛用于包裹图标，但并不是唯一的选择。我们也可以使用 <span> 或其他标签，但为了保持一致性和利用已有的图标库样式，使用 <i> 标签是一个普遍接受的实践。