使用图标

简介 #

Font Awesome 图标库已内置于 SmartChart，可在 HTML 组件、表格单元格、指标卡片等任意 HTML 内容中直接使用。图标通过 <i class="fas fa-图标名"> 或 <i class="fab fa-图标名"> 方式引用，支持实心、线框和品牌图标三种类型。

分类 class 前缀 示例
实心图标 fas <i class="fas fa-chart-line">
线框图标 far <i class="far fa-bell">
品牌图标 fab <i class="fab fa-github">

应用场景 #

Font Awesome 图标库已内置于 SmartChart，可在 HTML 组件、表格单元格、指标卡片等任意 HTML 内容中使用图标，丰富视觉表现。

加载图标资源 #

在模板的资源加载区中勾选或添加 Font Awesome 资源（已内置，直接在模板中启用即可）：

加载图标资源

使用方法 #

Font Awesome 图标通过 <i> 标签的 class 属性引用，格式为：

<!-- 实心图标（fas = Font Awesome Solid） -->
<i class="fas fa-图标名称"></i>

<!-- 线框图标（far = Font Awesome Regular） -->
<i class="far fa-图标名称"></i>

<!-- 品牌图标（fab = Font Awesome Brands） -->
<i class="fab fa-图标名称"></i>

常用图标示例 # 

<!-- 指标卡片中使用图标 -->
<i class="fas fa-chart-line" style="color:#1890ff;font-size:24px"></i> 销售额

<!-- 状态标识 -->
<i class="fas fa-arrow-up" style="color:#52c41a"></i> +12.5%
<i class="fas fa-arrow-down" style="color:#ff4d4f"></i> -3.2%

<!-- 操作按钮 -->
<button><i class="fas fa-refresh"></i> 刷新</button>
<button><i class="fas fa-download"></i> 下载</button>

<!-- 表格中的状态图标 -->
<i class="fas fa-check-circle" style="color:#52c41a"></i> 正常
<i class="fas fa-times-circle" style="color:#ff4d4f"></i> 异常

调整图标大小 #

Font Awesome 提供内置尺寸类：

<i class="fas fa-star fa-xs"></i>   <!-- 超小 -->
<i class="fas fa-star fa-sm"></i>   <!-- 小 -->
<i class="fas fa-star"></i>         <!-- 默认 -->
<i class="fas fa-star fa-lg"></i>   <!-- 大 -->
<i class="fas fa-star fa-2x"></i>   <!-- 2倍 -->
<i class="fas fa-star fa-3x"></i>   <!-- 3倍 -->

图标查询 #

  • V5 图标名称参考（SmartChart 内置版本）：

V5图标参考1 V5图标参考2 V5图标参考3 V5图标参考4

在 SmartChart 图形中使用图标 #

在 HTML 组件的 JS 代码中直接拼入 <i> 标签：

let dataset = __dataset__  // [['name','value','trend'], ['销售额','100万','up'], ...]

let cards = dataset.slice(1).map(row => {
    let icon = row[2] === 'up'
        ? '<i class="fas fa-arrow-up" style="color:#52c41a"></i>'
        : '<i class="fas fa-arrow-down" style="color:#ff4d4f"></i>'
    return `
        <div style="padding:16px;background:#fff;border-radius:8px;text-align:center">
            <div style="font-size:13px;color:#999">${row[0]}</div>
            <div style="font-size:24px;font-weight:bold;margin:8px 0">${row[1]}</div>
            <div>${icon} 环比</div>
        </div>
    `
}).join('')

dom__name__.innerHTML = `<div style="display:flex;gap:12px">${cards}</div>`
Edit Edit this page