在ionic3中自定义自己的图标字体

资源:阿里图标字体库

step1:寻找资源

搜索图标字体库,找到自己需要的图标字体并加入购物车。
添加到已存在的项目或者创建新的项目。

step2:下载资源

选择Font class类型,点击下载到本地。
下载完成后,解压缩,会得到一个字体文件夹。
将字体文件中的:

iconfont.css
iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff

五个文件拷贝到src/assets/fonts目录下并将iconfont.css改为iconfont.scss(如果你的ionic用的是scss的话)
在项目的src/theme/variables.scss中加入下面代码

$font-path: "../assets/iconfont";

step4:设置

打开fonts.scss文件并修改:

// 设置你的icon的统一样式
.you-icon-name { // 如果多个name,则以.name1,.name2,.name3形式
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
// 自定义自己的icon名称,后面的content值,参考原文件中的contnet
.you-icon-name:before{ content: "\e648"; }

完成后保存文件,重启ionic serve

step5:使用

在你的项目中,在需要使用此图标字体的地方,使用:

<div>
    <ion-icon name="you-icon-name"></ion-icon>
</div>

step6:更新

如果以后需要更新图标库,只需要在阿里图标库的项目中添加新的图标字体,并下载下来后替换原有的文件,并设置fonts.css中的图标文字,当然你也可以不改。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。