您的位置:首页 > 产品设计 > UI/UE

ionic(mui、elementUI)自定义字体图标

2018-02-24 19:17 381 查看

先自我检讨一下下:

之前在上家公司写MUI的时候,就用过自定义字体图标了,没有整理。
到这家公司写ionic有用到了自定义字体图标,还是要去查一下再写,没有整理。
现在都写vue了,elementUI也有自定义字体图标,关于字体图标我还是没有整理。真的是对自己无语了,懒死你了都!!!
技术群里经常也有人问,一时半会儿也解释不清楚,所以趁着刚上班不太忙,先整理一下,免得又忘了/生无可恋脸!!!
万变不离其宗,原理都是一样的,mui太久,就先介绍一下 ionic 和elementUI的吧。

自定义字体图标的好处(我自己知道的):

1、当框架自带的图标不能满足我们app或pc应用的需求时,就可以自定义了,想要什么就自定义什么,顺便还可以用一用阿里妈妈上图标,阿里妈妈图标库非常丰富且免费哦;
2、它比较小,不像png或者jpg、jpeg之类的比较大,加载慢,当然字体图标最适用于小图标;
3、也更容易控制其大小和颜色,当作字体来用就行,不会失真,模糊,当然svg也不会,但它跟png之类的一样,需要img,src引用。

自定义字体图标步骤:

第一步:在阿里妈妈上上传自己的图标(.svg格式),然后添加项目、修改图标名称、再下载到本地;
第二步:把相对应的字体文件添加到assets文件夹下的fonts文件夹下(没有,就自己创建一个fonts文件夹);
第三步:把iconfont.css文件里的代码拷贝到项目的app.scss文件里,并修改图标的iOS和md适配;
第四步:应用,怎么用ionic框架自带的图标,就怎么用你自己自定义的图标,可懂?!!!

前提

首先你得有个阿里妈妈的账号和你需要的.svg格式的图标!!!



开始啦!!!

有svg图标之后,登录阿里妈妈网站http://iconfont.cn/



上传之后

 


提交之后



加入购物车,然后添加至项目





你可以直接下载代码,不过我建议先添加至项目,再下载代码到本地。因为,你可以先在项目里把图标名称改成相对应框架自带图标的前缀和Font Family;参照框架源码!!!



编辑项目

一、ionic 的前缀是ion,Font Family是Ionicons;
二、elementUI 的前缀是el-icon,Font Family是element-icons;这样才能在用的时候,当作框架自带图标来用,用法相同。



参照ionic框架源码图标



参照elementUI框架源码图标



点击下载至本地



解压,添加至项目相对应的文件夹(看图标注)



看截图,然后就可以用啦,和用框架自带的图标一样用法
app.scss:
//自定义图标
@font-face {font-family: "Ionicons";
src: url('../assets/fonts/iconfont.eot?t=1514356104349'); /* IE9*/
src: url('../assets/fonts/iconfont.eot?t=1514356104349#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('../assets/fonts/iconfont.ttf?t=1514356104349') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../assets/fonts/iconfont.svg?t=1514356104349#iconfont') format('svg'); /* iOS 4.1- */
}

.Ionicons {
font-family:"Ionicons" !important;
font-size:2.4rem;//字体大小可以自定义
font-style:normal;
display: inline-block;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.ion-reg-vercode:before,.ion-ios-reg-vercode:before,.ion-md-reg-vercode:before,
.ion-ios-reg-vercode-outline:before { content: "\e615"; }
//1首页通知
.ion-home-inform:before ,.ion-ios-home-inform:before,.ion-md-home-inform:before,
.ion-ios-home-inform-outline:before{ content: "\e61a"; }

引用:

1、tab栏引用



2、其他引用



效果图:





ionic总结:

第一步:在阿里妈妈上上传自己的图标(.svg格式),然后添加项目、修改图标名称、再下载到本地;
第二步:把相对应的字体文件添加到assets文件夹下的fonts文件夹下(没有,就自己创建一个fonts文件夹);
第三步:把iconfont.css文件里的代码拷贝到项目的app.scss文件里,并修改图标的iOS和md适配;
第四步:应用,怎么用ionic框架自带的图标,就怎么用你自己自定义的图标,可懂?!!!

小细节:
1、在阿里妈妈上下载下来的代码,css中不会有iOS或者安卓格式的适配,直接是:
 .ion-home-inform:before{ content: "\e61a"; }

这样,所以你需要自己在app.scss文件中手动添加成如下样子:
 .ion-home-inform:before ,.ion-ios-home-inform:before,
.ion-md-home-inform:before,
.ion-ios-home-inform-outline:before{ content: "\e61a"; }
否则不显示;
用的时候直接:
<ion-icon name="home-inform" ></ion-icon>
2、还有,字体文件的路径一定要引用正确!!!
呃,废话有点多,不过,一步一步我都写的很清楚,还不懂的话可以私信我,关于elementUI字体图标,下一篇再写,太多了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息