官网: ionicons.com (超方便的使用帮助)
文章大量使用谷歌翻译,意思并不难理解。

发布 Ionicons v4!

[Ionicons](http://ionicons.com/)是一个完全开源的图标集,包含为网络,iOS,Android和桌面应用程序精心设计的700多个图标。 Ionicons是为[Ionic Framework](https://ionicframework.com/)而构建的,因此图标同时具有Material Design和iOS版本。当与Ionic一起使用时,ion-icon组件将根据您的平台自动使用正确的版本。此外,当在Ionic之外使用时,应用程序可以选择“ios”和“md”平台。

注意:所有品牌图标均为其各自所有者的商标。使用这些商标并不表示Drifty认可商标持有人,反之亦然。

访问[ionicons.com](http://ionicons.com)并查看搜索功能,其中包含标识常用图标名称和样式的关键字。例如,如果您搜索“箭头”,我们会调出每个可能用作箭头的图标。

我们打算将此图标包与[Ionic](http://ionicframework.com/)一起使用,但它绝不仅限于此。无论您认为合适,个人还是商业,都可以使用它们。它们可以在[MIT](http://opensource.org/licenses/MIT)下免费使用和许可。

使用Web组件

ICONICONS Web组件是在应用程序中使用ICONICON的一种简单而高效的方式。组件将动态加载每个图标的SVG,因此您的应用程序只请求您需要的图标。

还要注意的是,只有可见图标被加载,并且图标“低于折叠”并且隐藏在用户视图中,不会对SVG资源进行取回请求。

安装

如果您正在使用[Ionic Framework](https://ionicframework.com/),Ionicons默认打包,因此无需安装。 想要在没有离子框架的情况下使用Ionicons? 将以下“<script>”放在页面末尾附近,在结束</ body>标记之前,以启用它们。

官方源:
<script src="https://unpkg.com/ionicons@4.1.2/dist/ionicons.js"></script>
国内镜像:
<script src="https://cdn.bootcss.com/ionicons/4.1.2/collection/icon/icon.js"></script>

基本用法

要使用Ionicons包中的内置图标,请填充ion-icon组件上的name属性:

<ion-icon name="heart"></ion-icon>

要使用自定义SVG,请在src属性中提供其url以请求外部SVG文件。 src属性与<img src =“...”>的作用相同,因为必须可以从正在请求图像的网页访问该URL。 此外,外部文件只能是有效的svg,并且不允许svg元素中的脚本或事件。

<ion-icon src="/path/to/externa/file.svg"></ion-icon>

Platform specific icons

许多图标都具有Material Design和iOS版本,可为用户提供平台连续性。

平台连续性意味着默认情况下,在iOS上运行的离子(iPhone和iPad等Apple产品)将显示“ios”样式图标。 或者,在具有Material Design主题的设备上运行的离子(通常在Android设备上看到)将看到md样式图标。

Platform Continuity Within Ionic Apps

Ionic将自动使用基于平台的正确版本。 请注意,此功能仅会自动启动Ionic应用程序。 在Ionic应用程序之外使用时,请参阅下面的“Outside Ionic App”部分。

要指定每个平台的图标,请使用mdios属性并提供特定于平台的图标名称。

<ion-icon ios="ios-heart" md="md-heart"></ion-icon>

Platform Continuity Outside Ionic Apps

在没有Ionic Framework的情况下使用Ionicons时,图标将默认为Material Design图标样式。 要指定非默认图标样式,请在“name”属性中添加平台前缀。

<ion-icon name="ios-heart"></ion-icon>
<ion-icon name="md-heart"></ion-icon>

图标大小

要指定图标大小,可以使用size属性作为预定义的字体大小。

<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

或者,您可以通过在ion-icon组件上应用font-size CSS属性来设置特定大小。 建议使用8的倍数像素大小(8,16,32,64等)

ion-icon {
  font-size: 64px;
}

使用字体图标

字体图标与以前版本的Ionicons兼容。 如果您是第一次使用Ionicons,我们强烈建议您使用ion-icon组件。

该字体图标文件的优点是,所有的图标都在一个文件中。 该字体图标文件的缺点是,所有的图标都在一个文件中。 此外,大字体文件会对网页首次绘制时间产生负面影响。

在大多数情况下,使用Web组件方法请求少量svgs可能更好。 Web组件的一个好处是它使用Intersection Observer仅请求用户可以查看的图标(图标上方的图标)。 但是,如果网页必须同时显示许多图标(例如此网站的主页在一个页面上显示700多个图标),则字体图标可能是更好的选择。

安装

把下面的语句复制到HTML文件的<head>部分.

官方源:
<link href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css" rel="stylesheet">
国内镜像:
<link href="https://cdn.bootcss.com/ionicons/4.1.2/collection/icon/icon.css" rel="stylesheet">

基本用法

使用图标索引查找要使用的图标的名称。 图标的CSS类名称将以ion-为前缀,后跟平台属性md-,ios-或logo-并使用图标名称完成。

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

许可

Ionicons 根据[MIT许可证](http://opensource.org/licenses/MIT)获得许可。

有关