首页 > 分享发现 > ionic3 自定义图标文件(亲测可用)

ionic3 自定义图标文件(亲测可用)

首先准备好用来做图标的 svg 文件,你可以自己用 ai 画或者去网上下载就行啦,如下图所示:

svg 图标文件

 

上传到 iconmoon 进行处理

接下来访问 Icon Moon ,进入页面后点击左上角的 import icons(导入图标)按钮,将准备好的 svg 文件一个个上传上去。上传成功后如图所示

上传成功

 

接下来点选你需要的图标文件,选中的图标会出现一个黄色的边框,选择完成后点击右下角的 Generate Font(生成字体)按钮

点选

 

接下来的页面你可以修改字体的名字,这个名字最好有个统一的标识符,例如这里我都以 tt- 开头,确认完成后点击右下角的 download(下载)按钮将字体保存到电脑上。

修改名字

 

下载下来的是一个名为 iconmoon.zip 的压缩包,解压后文件如下图所示

解压文件

 

我们要用到的就是其中的 style.css 文件和那个 fonts 文件夹。首先将那个 fonts 文件夹拷贝到 ionic 项目的 src/assets/ 路径下。然后将那个 style.css 重命名为 icons.scss (名字自己方便识别就行,后缀一定要是.scss),把这个新文件拷贝到 ionic 项目的 src/theme/ 路径下。

 

接下来先打开 ionic 里的 app.scss 文件,在顶部添加一句内容:@import "../theme/icons";

 

然后打开刚刚创建的那个 icons.scss 文件,将文件中类似 src: url('fonts/icomoon.eot?39m2i2');  这样的语句里的 fonts 前都加上 ../assets/ ,如下图所示:

assets

 

为了让我们的自定义图标和 ionic 的图标书写方式保持一致,我们需要为不同的平台(ios 或 android)添加类。如下所示,如果需要支持 windows 手机,则添加 .ion-wp 前缀。每个图标都要写。

.tt-test1:before ,
.ion-ios-tt-test1:before ,
.ion-ios-tt-test1-outline:before ,
.ion-md-tt-test1:before ,
.ion-md-tt-test1-outline:before  {
  content: '\e900';
  font-size: 26px;
}


.tt-test2:before ,
.ion-ios-tt-test2:before ,
.ion-ios-tt-test2-outline:before ,
.ion-md-tt-test2:before ,
.ion-md-tt-test2-outline:before  {
  content: '\e901';
  font-size: 26px;
}

 

可以看到图标少还好,一旦很多的话写起来很麻烦,我们可以利用 scss 的语法简写这个过程。


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

 

然后对应每个图标,我们在 @mixin 语法下面写上对应的语句,类似下面这样


@include makeIcon(test1,'\e900');

例子

 

 

一般来说,到此你的图标文件就能够使用了,不过 ionic 默认的图标会用不了,为了解决这个问题我们找到 ionic 项目里的 variables.scss 文件,打开它,将其中 @import "ionic.ionicons"; 这句话修改为 @import "ionicons";

 

至此所有的操作就完成啦,接下来可以像下面这样使用我们自定义的图标

 
<ion-icon name="tt-test1"></ion-icon>
 
<ion-tabs>
 <ion-tab [root]="tab1Root" tabTitle="Default icon" tabIcon="home"></ion-tab>
 <ion-tab [root]="tab2Root" tabTitle="Custom icon" tabIcon="tt-test2"></ion-tab>
 <ion-tab [root]="tab3Root" tabTitle="Custom icon" tabIcon="tt-test3"></ion-tab>
</ion-tabs>

使用效果

 

 

 

留言板 当前主题:0

留言审核后可见.

相关杂记
快递查询插件--快递管家(支持国际件,自动提醒)

双十一到了,剁手族们的购物车内肯定囤积了很多的待购商品,可以想象之后快递员又有的忙了。这里放出一个自制的浏览器插件

阅读更多>>
javascript 里的 new 操作和继承(全记录)

主要是记录下 js 里关于 new 和 继承的细节,因为网上的资料都比较分散,这里汇总下,并且加上了思考的过程。

阅读更多>>
使用CDN来加载js等文件

博客里常常会带有一些代码演示的内容,这时候就希望代码里的关键词能够高亮显示。

阅读更多>>
DOS快餐店连载系列下载

这是很早之前《电脑爱好者》杂志上连载的内容,一共12期,主要是以小故事的形式讲解了 windows 下命令行工具的使用。例如批量重命名,循环等。

阅读更多>>
ionic3 自定义图标文件(亲测可用)

首先准备好用来做图标的 svg 文件,你可以自己用 ai 画或者去网上下载就行啦,如下图所示:

阅读更多>>