总结

• UIフレームワークのIonic(アイオニック)のフォントアイコンは魅力的

でも今回はIonic Frameworkは使わずに、生のAngularフレームワークのみとかでIonicのフォントアイコンを使いたい、、、

给这些方面的提示。

有一个名为ionicons的库，它仅提供Ionic的图标字体，使用它可以轻松地使用Ionic的图标。这次假设我们要将它放入现有的Angular项目中。方法1也可以直接在其他框架中使用。

环境

• Angular2以上のお話(1系のAngularJSではない)

• Angularのバージョン 5.2.7

(Nodeのバージョン 6.11.4)

[方案1] 从CDN获取

无论使用Angular与否，都可以使用这个。

<link rel="stylesheet”  href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

如果想要通过HTTP获取，请使用以下URL指定：http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css。

[第二种方法] 使用 npm 安装

假设您正在使用 angular-cli。

第一步

使用以下的命令进行npm安装。

npm install ionicons@'2.0.1' --save

第二步

在Angular项目的”.angular-cli.json”文件中的styles部分添加”../node_modules/ionicons/scss/ionicons.scss”。

"styles": [
    ...,
    "../node_modules/ionicons/scss/ionicons.scss"
],

确认

当使用方法1或方法2完成引入后，需要确认引入是否成功。有多种方法可以进行确认，例如在HTML中添加，或在CSS中添加等等。但本次我们将通过在HTML中添加class来进行确认。

在任意组件的模板文件中添加以下代码。

<i class="ion-social-angular"></i>

如果额外添加的部分中显示着Angular的图标，那么引入就是成功的。

以下是原文的中文简述：

只需要一种选择，以下是给出的中文简述：

– 参考文献

ionicons 是一个可用于构建高度可定制化图标的开源图标库。

点击要使用的图标后，会出现一个Class名称，只需要将其按照上述方式写入class中即可。