微信小程序中引入iconfont图标

1.从阿里巴巴矢量图标库中把需要的图标下载到本地

2.把iconfont.css里的代码复制到().wxss中

 

@font-face {

font-family: "iconfont";

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

src: url('iconfont.eot?t=1517890814177#iefix') format('embedded-opentype'),

/* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),

url('iconfont.ttf?t=1517890814177') format('truetype'),

/* chrome,

firefox,

opera,

Safari,

Android,

iOS 4.2+*/ url('iconfont.svg?t=1517890814177#iconfont') format('svg'); /* iOS 4.1- */

}

 

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

 

.icon-you:before {

content: "\e65f";

}

 

.icon-dingdanhao:before {

content: "\e60e";

}

3.在.wxml中写

<text class="iconfont icon-dingdanhao">text> //订单号

<text class="iconfont icon-you">text> //右

 

微信小程序中引入iconfont图标_第1张图片

 

 

你可能感兴趣的:(微信小程序中引入iconfont图标)