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 的图标,为用户提供更好的用户体验。