Ionicons 用法

Ionicons 是一個可以在 HTML, CSS 及 JavaScript 中使用的开源图标集 (Icon Set)，包含了许多常见的图标。它主要是专为移动设备应用设计，可适用于任何类型的 Web 项目。

安装及引用

它是使用 npm 以及 bower 管理的，所以安装是非常简单的。在终端中执行以下命令即可安装 Ionicons:

# 使用 npm 安装
npm install ionicons --save

# 或使用 bower 安装
bower install ionicons --save

也可以通过以下CDN引用：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" integrity="sha512-gNHI7xFKglbJnUFOmCNursOPKp4nF6YJLhqDkMtCj5m5Qm1QNzU6cBd6kI4xK4U6CKJ0AWTdYuU5M5A5X84Q5A==" crossorigin="anonymous" />

用法

在您的 HTML 文件中添加下面这行代码来引用 Ionicons：

<link rel="stylesheet" href="path/to/ionicons.min.css">

语法

以下是一个基本示例:

<!-- 用法示例 -->
<i class="icon ion-home"></i>

该示例显示了一个家的图标。 第一个类 ("icon")是必须的，其余的类 ("ion-home") 取决于您想要显示的图标。该示例中使用 "ion-home" 类，它具有 Ionicons 的一个特定图标。

图标大小

可以使用 font-size 属性设置图标的大小：

<i class="icon ion-home" style="font-size: 32px;"></i>

图标颜色

可以使用 color 属性设置图标的颜色：

<i class="icon ion-home" style="color: green;"></i>

图标动画

可以使用 Ionicons 提供的动画来为您的图标添加动画效果：

<i class="icon ion-md-refresh"></i>

该示例将旋转箭头图标以创建 "刷新" 效果。

图标组合

最后，您可以将多个图标组合来创建更复杂的图标：

<i class="icon ion-android-radio-button-off"></i><i class="icon ion-android-radio-button-on"></i>

该示例将两个单选按钮图标组合在一起，以形成一个 "开/关" 图标。

结论

Ionicons 是一个非常有用的图标库。使用 Ionicons，您可以轻松地添加漂亮，现代的图标，并将其引用到任何类型的 Web 项目中。