在Ionic 2中添加自定义图标 [英] Add Custom Icon in Ionic 2

问题描述

我正在使用Ionic 2来开发我的应用程序。我想在我的应用中使用自定义图标，就像我们使用 标记使用离子2图标一样。例如：

I am using Ionic 2 for developing my App. I want to use my custom icons in my app like we use ionic 2 icons using tag. Eg:

<ion-icon name="my-custom-icon"></ion-icon>

我如何实现这一目标？有没有推荐的方法呢？

How can i achieve this? Is there any recommended way to doing this?

推荐答案

如果你想在离子2中使用自定义字体你可以用以下方法做到。

If you want to use custom fonts in ionic 2 you can do it with following.

步骤01：

• 有/使用 XD 等工具创建自定义字体SVG文件。


• 转到精彩的在线工具 https://icomoon.io ，从SVG中生成字体图标文件。它是免费的工具而且非常好，我正在使用它一段时间。


• 下载自定义字体文件。


• 您的文件将如下所示。

• Have/create custom font SVG files using tools such as XD.
• Go to awesome online tool https://icomoon.io to generate font icons out of your SVG files. It's free tool and very good, I am using it for a while.
• Download your custom font file.
• Your file will look like something below.

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

将以上代码替换为：

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{
  @extend .ion;
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

步骤02：

• 我们可以使用SASS @mixing进行重复性工作

  @mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    content: $val;
    font-size: 26px;
  }
}

我们可以在我们的sass文件中使用我们的sass混音：

we can use our sass mixing in our sass file like :

@include makeIcon(icon-new-home, '\e911')

步骤03

使用它像

<ion-tabs class="footer-tabs" [selectedIndex]="mySelectedIndex">
    <ion-tab [root]="tab1Root" tabIcon="home"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="icon-new-home"></ion-tab>
 </ion-tabs>

它甚至支持android涟漪效应，有点看起来很酷

and its even support android ripple effect, which kinda looks cool

@ionic/app-scripts : 3.1.2
Ionic Framework    : ionic-angular 3.9.2

对于Ionic 3.1.2

For Ionic 3.1.2

您需要在 / src / theme中添加 @importionicons; /variables.scss 将修复以下错误的文件

You need to add @import "ionicons"; inside your /src/theme/variables.scss file which will fix below error

"[class^="icon-"]" failed to @extend ".ion". The selector ".ion" was not found. Use "@extend .ion !optional" 
        if the extend should be able to fail. 

这篇关于在Ionic 2中添加自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！