ionic自定义图标

前提

有时候我们需要根据实际需求修改tabs和ionic其他的图标，有试过png来设置background，但效果不是很好。

ionic所提供的图标在www/lib/ionic/fonts目录下，四个字体文件，如图所示：

所以我们自定义的图标也需要生成这样的字体文件。

介绍三个字体库：

• 阿里图标库
• icomoon
• fontello

这里就拿fontello来举例吧：

• 步骤一：
  
  • 所需的图标格式必须是svg格式
  • 把要生成的图标拖进去

• 步骤二：
  
  • 拖进去后选择，未选择是灰色的，选择后是如图所示
  • 点击图标可以修改图标命名等
  • 然后点击 Download webfont下载

• 步骤三：
  
  • 下载后打开font目录的五个字体文件粘贴到www/lib/ionic/fonts目录下

• 步骤四：
  
  • css目录下就把fontello.css粘贴到www/lib/ionic/css目录下

• 步骤五：
  
  • fontello.css文件注意路径是否正确
  • 若要自定义大小就添加font-size，因为是字体文件

• 步骤六：
  
  • 在index.html文件中添加该样式
  • 在tabs.html文件中应用图标

最终效果：

最后提一下：

icomoon网站操作方法大同小异，但是在自定义图标大小上目前没有找到解决办法，遂用了fontello，若发现能改变大小，望解惑。