Using Icons | Smartchart开发手册

Introduction #

Font Awesome icon library is built into SmartChart and can be used directly in HTML components, table cells, indicator cards, and any HTML content. Icons are referenced via <i class="fas fa-icon-name"> or <i class="fab fa-icon-name">, supporting three types: solid, regular, and brand icons.

Category	Class Prefix	Example
Solid Icons	`fas`	`<i class="fas fa-chart-line">`
Regular Icons	`far`	`<i class="far fa-bell">`
Brand Icons	`fab`	`<i class="fab fa-github">`

Use Cases #

Font Awesome icon library is built into SmartChart. Use icons in HTML components, table cells, indicator cards, and any HTML content to enrich visual presentation.

Load Icon Resources #

Check or add Font Awesome resources in the template’s resource loading area (built-in, just enable in template):

Load Icon Resources

Usage #

Font Awesome icons are referenced via the <i> tag’s class attribute:

<!-- Solid icons (fas = Font Awesome Solid) -->
<i class="fas fa-icon-name"></i>

<!-- Regular icons (far = Font Awesome Regular) -->
<i class="far fa-icon-name"></i>

<!-- Brand icons (fab = Font Awesome Brands) -->
<i class="fab fa-icon-name"></i>

Common Icon Examples #

<!-- Icon in indicator card -->
<i class="fas fa-chart-line" style="color:#1890ff;font-size:24px"></i> Revenue

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

<!-- Action buttons -->
<button><i class="fas fa-refresh"></i> Refresh</button>
<button><i class="fas fa-download"></i> Download</button>

<!-- Status icons in table -->
<i class="fas fa-check-circle" style="color:#52c41a"></i> Normal
<i class="fas fa-times-circle" style="color:#ff4d4f"></i> Error

Adjusting Icon Size #

Font Awesome provides built-in size classes:

<i class="fas fa-star fa-xs"></i>   <!-- Extra small -->
<i class="fas fa-star fa-sm"></i>   <!-- Small -->
<i class="fas fa-star"></i>         <!-- Default -->
<i class="fas fa-star fa-lg"></i>   <!-- Large -->
<i class="fas fa-star fa-2x"></i>   <!-- 2x -->
<i class="fas fa-star fa-3x"></i>   <!-- 3x -->

Icon Search #

V5 Icon Name Reference (SmartChart built-in version):

V5 Icons 1 V5 Icons 2 V5 Icons 3 V5 Icons 4

Online Icon Search: Font Awesome Icon Library (verify version matches built-in version when searching)
Tutorial Reference: Font Awesome Tutorial

Using Icons in SmartChart Graphics #

Directly embed <i> tags in the JS code of HTML components:

let dataset = __dataset__  // [['name','value','trend'], ['Revenue','100M','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} YoY</div>
        </div>
    `
}).join('')

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