Foundation 图标
Foundation图标文档
Foundation 是一套响应式框架，内置了多种不同用途的图标，可以方便开发者在网站中使用。此文档主要介绍 Foundation 中图标的使用和相关属性。
图标的基本用法
Foundation 图标可以使用i标签或span标签，通过类名来控制不同图标的显示。
<i class="fi-plus"></i>
<span class="fi-minus"></span>
图标大小与颜色
Foundation 中的图标可以使用font-size属性和color属性来控制图标的大小和颜色。
<i class="fi-minus" style="font-size: 2rem; color: red;"></i>
图标与文本对齐方式
在 Foundation 中，默认情况下图标是与文本垂直居中，并且与文本间存在一定的间距。可以使用vertical-align属性和margin属性来调整对齐与间距。
<p>
<i class="fi-play" style="font-size: 2rem; vertical-align: middle;"></i>
<span style="margin-left: 10px;">播放</span>
</p>
自定义颜色
Foundation 中的图标可以使用基础颜色，也可以自定义颜色。可以通过覆盖默认的 CSS 类来实现。
<style>
.flag-orange:before {
color: orange;
}
</style>
<i class="fi-flag flag-orange"></i>
添加链接
Foundation 图标可以包含在链接标签a中，通过这种方式可以实现图标和文本的同时点击。
<a href="https://www.zhihu.com/">
<i class="fi-social-zhihu"></i>
<span style="margin-left: 10px;">知乎</span>
</a>
搜索图标
在 Foundation 中，可以使用两个图标来表示搜索功能。fi-magnifying-glass为放大镜图标，fi-x为关闭图标。可以通过 JavaScript 配合实现搜索框的显示和隐藏。
<div class="input-group">
<input id="search-input" class="input-group-field" type="text" placeholder="输入关键字...">
<span class="input-group-label" onclick="toggleSearchBox()">
<i id="search-icon" class="fi-magnifying-glass"></i>
<i id="close-icon" class="fi-x" style="display: none;"></i>
</span>
</div>
function toggleSearchBox() {
var input = document.getElementById("search-input");
var searchIcon = document.getElementById("search-icon");
var closeIcon = document.getElementById("close-icon");
if (input.style.display === "none") {
input.style.display = "inline-block";
closeIcon.style.display = "inline-block";
searchIcon.style.display = "none";
} else {
input.style.display = "none";
closeIcon.style.display = "none";
searchIcon.style.display = "inline-block";
}
}
总结
Foundation 提供了丰富的图标，开发者可以通过 CSS 来自定义图标的大小、颜色、对齐方式等。在实际应用中，开发者可以灵活运用 Foundation 的图标，为用户提供更好的用户体验。