ionic3 更换自带字体图标 (ionicon.ttf)

修改ionic自带字体图标,使用自己需要的图标

[1] 工具:(破解安装自行百度)

       Adobe Illustrator CC(AI):获取eps/ai图标文件

       FontLab:编辑字体图标文件(.ttf)

[2] 步骤:

        (1)  UI提供图标eps文件,文件包含所有需要的图标文件
           

         (2)  从项目中拿一份字体文件出来,ionicon.ttf(可以从node_modules/ionic-angular/fonts/中),复制多一份,命名为二狗(随意)

       (3) 用FontLab打开ionicon.ttf,可以看到原字体文件
            

     (4)随意双击一个图标可以进入图标编辑页面

       

选中这个图标,(注意选择框要全包住这个图标,为红表示选中,然后右键删除),在 Adobe Illustrator打开的图标文件中,选择复制一个准备替换的图标,   然后黏贴在空白居中处(左下角有个视图比例,建议黏贴的时候调成25%,这样黏贴过来的图标比较容易找到,找到之后再自行调整比例,注意图标要把它放中间),自行调整大小 .好了之后保存.    

 (5)导出字体文件  Ctrl+Alt+G,字体格式为.ttf,名字为ionicon.ttf(与源文件一样)

 (6)登录http://www.font2web.com/ ,浏览选中生成的ttf文件 ,点击CONVERT生成对应的字体图标相关文件  

 (7)开始替换, 删除node_module/ionic-angular/fonts文件夹下的ionicon.otf,ionicon.eot,ionicon.ttf,ionicon.woff,ionicon.woff2文件,然后将新生成的文件fonts目录下的几份文件全部拷贝过来

放到目录中,打开同目录下的ionicon.scss,注释掉其字体引用文件,添加进自己的引用文件

@font-face {
  font-family: "Ionicons";
  src: 
    // url("#{$ionicons-font-path}/ionicons.woff2?v=#{$ionicons-version}") format("woff2"),
    // url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
    // url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype");
    url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
    url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
    url("#{$ionicons-font-path}/ionicons.svgv=#{$ionicons-version}") format('svg'),
    url("#{$ionicons-font-path}/ionicons.eotv=#{$ionicons-version}") ;
  font-weight: normal;
  font-style: normal;
}

(8)到这里文件已经替换成功,重新执行ionic serve就能看到效果,接下来怎么用的问题.重新回到FontLab中去,把修改过的ttf文件同二狗文件(未修改的进行比较),你替换了哪个图标就用那个图标的名称代码即可.

当然,也可以引入新的字体图标,使用自己需要的图标

[1] UI工作,在阿里巴巴矢量库里面制作图标

[2] 图标单一颜色的,使用Font class模块代码即可(具体下载下来的代码中有教程);

         图标多颜色的,使用svg模块代码即可(具体下载下来的代码中有教程)

[3] 重点的引入文件位置:目前知道的可以放在www/assets/下,这样打包出来的apk会有引入文件,其他位置好像会重新编译会被覆盖;注意在index.html中引入文件,全局样式中按阿里巴巴矢量图标库代码里面一般会有一个自己的样式类(.icon),需要修改下类名,不然会跟ionic3 自身的字体类冲突