---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon'
title: '添加图标 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T13:50:52+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  任意尺寸都清晰的图标，单独用或放在彩色图形里。用它标记标题、搭建特性网格或加小可点击链接。

  添加图标
  登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加图标
      description: |-
        任意尺寸都清晰的图标，单独用或放在彩色图形里。用它标记标题、搭建特性网格或加小可点击链接。

        添加图标
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T13:50:52+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon'
      articleSection: 数据与动效
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/elements/icon'
      description: |-
        任意尺寸都清晰的图标，单独用或放在彩色图形里。用它标记标题、搭建特性网格或加小可点击链接。

        添加图标
        登录后打开页面：悬停内容区即出现构建器控件。您的第一页介绍基础操作。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[添加内容](/zh-hans/hc/documentation/learn-dxpr-builder/elements) /[数据与动效](/zh-hans/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # 添加图标.

 学习 DXPR Builder搭建页面添加内容数据与动效

   ## 本指南内容

 相关指南

- [在样式面板中改变元素外观](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

任意尺寸都清晰的图标，单独用或放在彩色图形里。用它标记标题、搭建特性网格或加小可点击链接。

## 添加图标

登录后打开页面：悬停内容区即出现构建器控件。[您的第一页](/zh-hans/hc/documentation/learn-dxpr-builder/getting-started/first-page)介绍基础操作。

1. 悬停列，点击其控制栏中的 **+**；空白页面请点击 **Add Elements**。打开 **Content** 选项卡并点击 **Icon**。它落在列顶部，设置对话框打开。
2. 在对话框顶部的 **Icon** 字段中选择图标集，在 **Search** 中输入并点击图标。图标高亮，其类名显示在网格下方。
3. 选择 **Size**，例如 **Very Large (3x)**。
4. 点击 **Icon utilities** 标题展开，将 **Style** 设为 **Circle**。
5. 点击对话框中的 **Save**。再点击内容区顶部工具栏中的 **Save** 保存页面。

  ## 您会看到的内容

您选择的图标按所选尺寸显示，默认白色，深灰圆底。视频中火箭以 Very Large (3x) 出现，是常规尺寸的三倍。保存并发布页面后访客可见。

## 设置您的图标

悬停元素，在其控制栏打开 **More > Settings**。选项：

- **Icon:** 选择器，带 **Search** 框、图标集列表和图标网格。
- **Size:** Normal、Large、Extra Large (2x)、Very Large (3x)、Huge (4x) 或 Gigantic (5x)。
- **Link:** 让图标可点击。
- **Link target:** Same window 或 New window。添加链接后显示。
- **Style:** 图标后的图形：None、Rounded、Circle 或 Square。在 **Icon utilities** 下。
- **Icon animation:** No、Spin 或 Pulse。
- **Icon orientation:** Normal、Rotate 90、Rotate 180、Rotate 270、Flip horizontal 或 Flip vertical。

## 如果看不到它

- **Content 选项卡中没有 Icon。** 您的用户档案隐藏了它。请管理员到[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)启用。
- **重新加载后消失。** 页面未保存。请重新添加并点击内容区顶部工具栏中的 **Save**。
- **选择器中没有想要的图标。** 您的用户档案限定了图标集。请管理员到[用户档案](/zh-hans/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)添加图标集。
- **图标太小不显眼。** **Size** 为 Normal 或 Large。请悬停元素打开 **More > Settings**，选择 Extra Large (2x) 或更大。
- **圆圈颜色不对。** 图形默认深灰。请悬停元素打开 **More > Settings**，点击底部的 **Style** 标题并设置 **Background**。**Font color** 改变图标本身。

## 接下来做什么？

[样式选项卡](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings/style-tab)：改变图标的颜色和间距。