图标 Vue 组件

图标 Vue 组件代表图标元素。它已准备好与自定义图标一起使用。Framework7图标和材料图标.

图标组件

包含以下组件：

f7-icon

图标属性

属性	类型	默认	描述
size	数字字符串		图标大小（像素）
icon	字符串		自定义图标类
f7	字符串		F7 图标字体图标的名称
material	字符串		Material 图标字体图标的名称
ios	字符串		在使用 iOS 主题时使用的图标。由图标系列和图标名称组成，例如`f7:house`
md	字符串		在使用材料主题时使用的图标。由图标系列和图标名称组成，以冒号分隔，例如`material:home`
提示	字符串		图标提示图标悬停/点击时显示的文本
tooltip-trigger	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`

示例

<!-- Default back icon -->
<f7-icon icon="icon-back"></f7-icon>

<!-- Some custom icon -->
<f7-icon icon="icon-home"></f7-icon>

<!-- F7 Icons font icon -->
<f7-icon f7="house"></f7-icon>

<!-- Material Icons font icon -->
<f7-icon material="home"></f7-icon>

<!-- F7 icons font icon with custom size and color -->
<f7-icon f7="house" size="44px" color="blue"></f7-icon>

<!-- Conditional icon -->
<f7-icon ios="f7:house" md="material:home"></f7-icon>

改进此文档

在本页上

图标组件
图标属性
示例