ant-design/components/iconfont/index.md

# Iconfont

- category: Components
- chinese: 字体图标
- order: 0
- nodemos: true

---

有含义的矢量图形，每一个图标打倒一个敌人。

## 图标的命名规范

我们为每个图标赋予了语义化的命名。我们的命名规范如：

- 使用 `-` 来连接单词；

- 实心和描线图标保持同名，用 `-o` 来区分，比如 `question-circle`(实心) 和 `question-circle-o`(描线)；

- 命名顺序：`[icon名]-[描线与否]-[方向]`。

每个图标的类名需要在图标名称前加上 `anticon-` 前缀，如 `.anticon-question-circle`。

## 如何使用

使用时所有的图标都需要一个基类 `.anticon` 和对应每个图标的类。在这里，我们使用 `<i>` 标签，如下面代码演示使用即可。

```html
<i class="anticon anticon-link"></i>
```

> 点击图标复制代码。

## 图标列表

### 一. 方向性图标

<ul class="row anticons-list clearfix">
	<li>
		<i class="anticon anticon-step-backward"></i>
		<span class="anticon-class">step-backward</span>
	</li>
	<li>
		<i class="anticon anticon-step-forward"></i>
		<span class="anticon-class">step-forward</span>
	</li>
	<li>
		<i class="anticon anticon-fast-backward"></i>
		<span class="anticon-class">fast-backward</span>
	</li>
	<li>
		<i class="anticon anticon-fast-forward"></i>
		<span class="anticon-class">fast-forward</span>
	</li>
	<li>
		<i class="anticon anticon-shrink"></i>
		<span class="anticon-class">shrink</span>
	</li>
	<li>
		<i class="anticon anticon-arrow-salt"></i>
		<span class="anticon-class">arrow-salt</span>
	</li>
	<li>
		<i class="anticon anticon-down"></i>
		<span class="anticon-class">down</span>
	</li>
	<li>
		<i class="anticon anticon-up"></i>
		<span class="anticon-class">up</span>
	</li>
	<li>
		<i class="anticon anticon-left"></i>
		<span class="anticon-class">left</span>
	</li>
	<li>
		<i class="anticon anticon-right"></i>
		<span class="anticon-class">right</span>
	</li>
	<li>
		<i class="anticon anticon-caret-down"></i>
		<span class="anticon-class">caret-down</span>
	</li>
	<li>
		<i class="anticon anticon-caret-up"></i>
		<span class="anticon-class">caret-up</span>
	</li>
	<li>
		<i class="anticon anticon-caret-left"></i>
		<span class="anticon-class">caret-left</span>
	</li>
	<li>