ionic2中使用自定义字体图标/iconfont自定义字体图标

使用自定义字体图标的开始是一样的都是在字体图标库生成需要用到的字体图标。步骤如下:

以上我选择过前两个都可以实现（Unicode/Font class都可以）

• unicode 最原始的方式，但是兼容性好。

• fontclass 使用伪元素和css类的方式，与ionic一样，兼容限制ie8+

• symbol 唯一支持保留颜色的方式，但是兼容性需要考虑(支持svg的设备和浏览器可以)

ionic用法：

接下来的两种引用方式：不管是哪种引用方式，CSS样式修改后均放在引用的地方的scss页面内，比如tab页面引用的图标就放Tab页面的SCSS里面，或者直接放在app.scss里面，也就是根组件的scss样式里面

1.直接引用方式：

< i class= "iconfont ion-ios-xiaoxi" ></ i >

直接引用的CSS样式修改：

 

@font-face { font-family: "iconfont";

src: url( '../assets/myFont/iconfont.eot?t=1493867644778'); /* IE9*/

src: url( '../assets/myFont/iconfont.eot?t=1493867644778#iefix') format( 'embedded-opentype'), /* IE6-IE8 */

url( '../assets/myFont/iconfont.woff?t=1493867644778') format( 'woff'), /* chrome, firefox */

url( '../assets/myFont/iconfont.ttf?t=1493867644778') format( 'truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url( '../assets/myFont/iconfont.svg?t=1493867644778#iconfont') format( 'svg'); /* iOS 4.1- */

}

 

.iconfont{

text-transform: none;

font-weight: normal;

font-style: normal;

font-variant: normal;

font-family: 'iconfont' !important;

line-height: 1;

/* Better Font Rendering =========== */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

speak: none;

}

 

.ion-ios-cust:before,

.ion-ios-xiaoxi:before,

.ion-ios-xiaolian:before,

.ion-ios-xiaolian-outline:before,

.ion-ios-xiaoxi-outline:before,

.ion-ios-cust-outline:before

{

@extend .iconfont;

}

 

.ion-ios-cust:before {

content: "\e601";

}

 

.ion-ios-cust-outline:before{

content: "\e601";

}

2.符合ionic的引用方式：

这里需要注意的是1.修改类名字，2.删除下载的iconfont样式让其自动继承ionic默认的样式：

< ion-icon name= "smile" ></ ion-icon >

// 修改font-family名字.注意路径

@font-face { font-family: "Ionicons";

src: url( '../assets/tab/iconfont.eot?t=1499857930007'); /* IE9*/

src: url( '../assets/tab/iconfont.eot?t=1499857930007#iefix') format( 'embedded-opentype'), /* IE6-IE8 */

url( '../assets/tab/iconfont.woff?t=1499857930007') format( 'woff'), /* chrome, firefox */

url( '../assets/tab/iconfont.ttf?t=1499857930007') format( 'truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url( '../assets/tab/iconfont.svg?t=1499857930007#iconfont') format( 'svg'); /* iOS 4.1- */

}

 

// 这部分删掉，让其自动继承ionic默认的icon样式即可

// .iconfont{

// font-family:"iconfont" !important;

// font-size:18px;

// font-style:normal;

// -webkit-font-smoothing: antialiased;

// -moz-osx-font-smoothing: grayscale;

// }

 

.ion-md-smile:before,//注意这里是ion不是icon,每个类名都加上md/ios适配安卓iOS，ios需要多一个outline

.ion-ios-smile:before,

.ion-ios-smile-outline:before {

content: "\e68a";

}

效果：

vue用法：

在导入iconfont后

在main.js里面引入样式

import './assets/iconfont/iconfont.css'//iconfont样式

使用

<i class="iconfont icon-shangsanjiaoxing"></i>