资源:阿里图标字体库
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中的图标文字,当然你也可以不改。