<commit_before># Iconfont

- category: Components
- chinese: 字体图标
- type: 基本

---

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

## 图标的命名规范

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

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

- 实心和描线图标保持同名，用 `-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><commit_msg>className<commit_after># Iconfont

- category: Components
- chinese: 字体图标
- type: 基本

---

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

## 图标的命名规范

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

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

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

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

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

## 如何使用

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

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

> 点击图标复制代码。

## 图标列表

### 一. 方向性图标

<ul class="row anticons-list clearfix">
	<li>
{'fraction_non_alphanumeric': 0.1960431654676259, 'fraction_numerical': 0.0, 'mean_word_length': 4.649746192893401, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1526142', 'n_tokens_mistral': 760, 'n_tokens_neox': 809, 'n_words': 85}