界面图标¶

Odoo 的界面依赖两套图标系统：

Material Symbols （Google Fonts）是主要的图标库，覆盖绝大多数界面需求。
Odoo UI Icons（OI） 是补充图标库，用于提供 Material Symbols 中不可用的图标——自定义视图图标、品牌徽标（如 Facebook、GitHub）以及其他 Odoo 特有的字形。

两套系统共用同一个 .oi 基类，并使用 data-icon 属性指定要渲染的图标。

Material Symbols¶

Odoo Web 客户端中加载的是 Material Symbols Outlined 的一个子集。任何标准图标（动作、导航、状态指示等）都可使用它。

将图标的连字名称（见 fonts.google.com/icons 中列出的名称）传给 data-icon 属性：

示例

<i class="oi" data-icon="check"/>
<i class="oi" data-icon="settings"/>
<i class="oi" data-icon="arrow_forward"/>

小技巧

要浏览和搜索图标，请访问 Material Symbols 图标库，或打开媒体对话框查看 Odoo 中可用的确切图标子集。在 Odoo 编辑器中输入 /icons，可通过 Powerbox 直接打开图标选项卡。

注解

Odoo 中可用的图标列表维护在 icons_wishlist.txt 中。

Odoo 界面图标¶

OI 图标库涵盖 Material Symbols 中不可用的图标：品牌徽标、自定义看板视图图标以及其他 Odoo 特有的字形。OI 图标在 data-icon 属性中使用 oi_ 前缀：

示例

<i class="oi" data-icon="oi_odoo"/>
<i class="oi" data-icon="oi_view-kanban"/>
<i class="oi" data-icon="oi_facebook"/>

与 Material Symbols 图标库一样，Odoo 自定义图标也可以在 Odoo 媒体对话框中找到。

Odoo

oi_odoo

oi_studio

oi_view-kanban

oi_view-pivot

oi_view-cohort

oi_app_documents

oi_threads

社交

oi_bandcamp

oi_behance

oi_behance-square

oi_bluesky

oi_deviantart

oi_digg

oi_discord

oi_dribbble

oi_facebook

oi_facebook-square

oi_flickr

oi_foursquare

oi_google-plus

oi_imdb

oi_instagram

oi_kickstarter

oi_lastfm

oi_linkedin

oi_linkedin-square

oi_medium

oi_meetup

oi_mixcloud

oi_odnoklassniki

oi_pinterest

oi_pinterest-square

oi_product-hunt

oi_qq

oi_quora

oi_reddit

oi_reddit-square

oi_skype

oi_slack

oi_snapchat

oi_soundcloud

oi_spotify

oi_steam

oi_strava

oi_telegram

oi_tiktok

oi_tumblr

oi_twitch

oi_vimeo

oi_vk

oi_weibo

oi_whatsapp

oi_x

oi_x-square

oi_xing

oi_yelp

oi_youtube

oi_youtube-play

oi_youtube-square

技术

oi_amazon

oi_android

oi_angellist

oi_apple

oi_bitbucket

oi_bitbucket-square

oi_chrome

oi_codepen

oi_creative-commons

oi_css3

oi_dropbox

oi_drupal

oi_edge

oi_git

oi_github

oi_github-square

oi_gitlab

oi_google

oi_google-play

oi_hacker-news

oi_html5

oi_joomla

oi_linux

oi_opera

oi_safari

oi_stack-overflow

oi_trello

oi_windows

oi_wordpress

oi_yahoo

支付方式

oi_paypal

oi_cc-paypal

oi_cc-amex

oi_cc-diners-club

oi_cc-discover

oi_cc-jcb

oi_cc-mastercard

oi_cc-stripe

oi_cc-visa

RTL 适配¶

某些 OI 视图图标具有 RTL（从右到左）适配，在启用 RTL 语言时会将字形水平翻转。Material Symbols 的方向性图标（箭头、尖角符号等）也包含 RTL 适配；完整列表请参阅 rtl_icons.scss。

工具类¶

以下工具类可与 .oi 组合使用：

oi-fw

固定宽度 — 用于在列表或菜单中对齐图标。

示例

<i class="oi oi-fw" data-icon="check"></i>

oi-spin

连续 360° 旋转（2 秒，线性）。适用于加载指示器。

示例

<i class="oi oi-spin" data-icon="progress_activity"></i>

oi-pulse

8 步脉冲旋转（1 秒）。作为 oi-spin 的替代方案，用于分步动画。

示例

<i class="oi oi-pulse" data-icon="progress_activity"></i>

oi-filled

默认情况下，Material Symbols 以其轮廓样式渲染。添加 oi-filled 可渲染图标的填充变体。

示例

<i class="oi oi-filled" data-icon="favorite"></i>

尺寸类

oi-sm、oi-lg、oi-2x、oi-3x … oi-10x 会相对于当前字体大小缩放图标。

示例

<i class="oi oi-2x" data-icon="check"></i>

注解

也可以通过在 CSS 中覆盖 --oi-font-size 变量来调整图标字体大小：

.my-element {
   --oi-font-size: 1.5em;
}

从 CSS 设置图标¶

如需直接从 CSS（而不是 data-icon 属性）设置图标的字形，请将图标的连字名称用作 content 的值。如需使用填充变体，请在名称后附加 _f，或将 'FILL' 的 font-variation-settings 设置为 1。在 PDF 报表中请优先使用 _f 后缀，因为 wkhtmltopdf 不支持 font-variation-settings。

示例

/* Outline variant */
.my-element::before { content: "favorite"; }

/* Filled variant */
.my-element::before { content: "favorite_f"; }
/* OR */
.my-element::before {
   content: "favorite";
   font-variation-settings: 'FILL' 1;
}

注解

在大多数情况下，应通过 HTML 中的 oi-filled 类设置填充变体，这种方式在 PDF 报表中同样有效。

从 Font Awesome 迁移¶

Odoo 的用户界面过去使用 fa fa-<name> 和 oi oi-<name> HTML 类名来渲染 Font Awesome 和 Odoo UI 图标。

自从引入 Material Symbols 和新的 Odoo UI 图标 以来，这些字形类名不再有效，必须在新图标系统中替换为对应的 data-icon。

为了便于图标迁移，我们引入了 SCSS 映射；你可以参考它们来帮助切换到新的图标系统。

Font Awesome 到 Material Symbols 的映射：fa_to_ms.scss
（旧）Odoo 自定义图标 到 Material Symbols 的映射：oi_to_ms.scss

重要

从 Odoo 20 起，这些映射已不再包含在 Odoo 代码库中；上面的链接指向包含它们的最后一个修订版本。

迁移步骤：

将 class="fa fa-<name>" 替换为 class="oi" data-icon="<ms-name>"，其中 <ms-name> 是对应的 Material Symbols 连字名称。
对于 Material Symbols 中不可用的图标（品牌图标、Odoo 自定义字形），请使用 Odoo UI 图标 库：class="oi" data-icon="oi_<name>"。
删除所有 fa-* 尺寸与格式化类，并替换为等效的 oi-* 实用类（fa-lg → oi-lg、fa-2x → oi-2x、fa-fw → oi-fw、fa-spin → oi-spin、fa-pulse → oi-pulse）。

示例

以下是新旧图标系统中等效图标的一些示例：

<!-- Old system -->
<i class="fa fa-user"></i>
<!-- New system -->
<i class="oi oi-filled" data-icon="person"></i>

<!-- Old system -->
<i class="fa fa-github fa-2x"></i>
<!-- New system -->
<i class="oi oi-2x" data-icon="oi_github"></i>

<!-- Old system -->
<i class="oi oi-settings-adjust"></i>
<!-- New system -->
<i class="oi" data-icon="tune"></i>

<!-- Old system -->
<i class="oi oi-view-pivot"></i>
<!-- New system -->
<i class="oi" data-icon="oi_view-pivot"></i>

Odoo Spreadsheet 图标¶

Odoo Spreadsheet 的图标以 <svg> 元素定义，并使用 QWeb templates 渲染。

示例

<t t-name="o-spreadsheet-Icon.GLOBAL_FILTERS">
    <svg width="20" height="20" viewbox="0 0 20 20">
        <path fill="currentColor" d="M1 3h12L7 9M5.5 6h3v11l-3-3M14 4h4v2h-4m-3 3h7v2h-7m0 3h7v2h-7"/>
    </svg>
</t>

SEE_RECORDS

GLOBAL_FILTERS

NEW

COPY_FILE

SAVE

VERSION_HISTORY

CAMERA

DOWNLOAD_AS_JSON

ADD_TO_DASHBOARD

ODOO_LIST

INSERT_LIST

REFRESH_DATA

COMMENTS

LINE_CHART

STACKED_LINE_CHART

AREA_CHART

STACKED_AREA_CHART

COLUMN_CHART

STACKED_COLUMN_CHART

BAR_CHART

STACKED_BAR_CHART

COMBO_CHART

PIE_CHART

DOUGHNUT_CHART

SCATTER_CHART

GAUGE_CHART

SCORECARD_CHART

WATERFALL_CHART

POPULATION_PYRAMID_CHART

RADAR_CHART

FILLED_RADAR_CHART

GEO_CHART

FUNNEL_CHART

SUNBURST_CHART

TREE_MAP_CHART

CLEAR_AND_RELOAD

EXPORT_XLSX

OPEN_READ_ONLY

OPEN_DASHBOARD

OPEN_READ_WRITE

IMPORT_XLSX

UNDO

REDO

CUT

COPY_AS_IMAGE

PASTE

CLEAR

FREEZE

UNFREEZE

FORMULA

HIDE_ROW

UNHIDE_ROW

HIDE_COL

UNHIDE_COL

INSERT_ROW

INSERT_ROW_BEFORE

INSERT_ROW_AFTER

INSERT_COL

INSERT_COL_AFTER

INSERT_COL_BEFORE

INSERT_CELL

INSERT_CELL_SHIFT_DOWN

INSERT_CELL_SHIFT_RIGHT

DELETE_CELL_SHIFT_UP

DELETE_CELL_SHIFT_LEFT

INSERT_DROPDOWN

INSERT_SHEET

PAINT_FORMAT

CONDITIONAL_FORMAT

CLEAR_FORMAT

BOLD

ITALIC

UNDERLINE

STRIKE

TEXT_COLOR

FILL_COLOR

MERGE_CELL

ALIGN_LEFT

ALIGN_CENTER

ALIGN_RIGHT

ALIGN_TOP

ALIGN_MIDDLE

ALIGN_BOTTOM

WRAPPING_OVERFLOW

WRAPPING_WRAP

WRAPPING_CLIP

BORDERS

BORDER_HV

BORDER_H

BORDER_V

BORDER_EXTERNAL

BORDER_LEFT

BORDER_TOP

BORDER_RIGHT

BORDER_BOTTOM

BORDER_CLEAR

BORDER_TYPE

BORDER_COLOR

BORDER_NO_COLOR

PLUS

MINUS

LIST

ARROW_DOWN

ARROW_UP

ARROW_RIGHT

SMILE

MEH

FROWN

GREEN_DOT

YELLOW_DOT

RED_DOT

SMALL_DOT_RIGHT_ALIGN

SORT_RANGE

FILTER_ICON

CHECK

NUMBER_FORMATS

FONT_SIZE

SPLIT_TEXT

DISPLAY_HEADER

COG

PLUS_IN_BOX

MINUS_IN_BOX

GROUP_ROWS

UNGROUP_ROWS

GROUP_COLUMNS

UNGROUP_COLUMNS

DATA_VALIDATION

THIN_DRAG_HANDLE

SHORT_THIN_DRAG_HANDLE

EDIT_TABLE

DELETE_TABLE

PAINT_TABLE

CIRCLE_INFO

PIVOT

INSERT_PIVOT

MOVE_SHEET_LEFT

MOVE_SHEET_RIGHT

RENAME_SHEET

CAROUSEL