在 Ionic 2 中添加自定义图标 [英] Add Custom Icon in Ionic 2
问题描述
我正在使用 Ionic 2 来开发我的应用程序.我想在我的应用程序中使用我的自定义图标,就像我们使用 标签使用 ionic 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?
推荐答案
如果你想在 ionic 2+ 中使用自定义字体,你可以通过以下方式实现.
If you want to use custom fonts in ionic 2+ you can do it with following.
第 1 步:
- 使用 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;
}
第 2 步:
- 我们可以使用 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
对于离子 3.1.2
您需要在 /src/theme/variables.scss
文件中添加 @import "ionicons";
以修复以下错误
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屋!