微信小程序使用iconfont

1、到阿里巴巴矢量图标库中将需要的icon图标加入购物车；

2、下载代码；

3、在下载的文件中打开 iconfont.css文件；

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1533976372240'); /* IE9*/
  src: url('iconfont.eot?t=1533976372240#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=1533976372240') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1533976372240#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-msnui-rmb:before { content: "\e627";}

.icon-jiantoushang:before { content: "\e62c"; }

.icon-jiantoushang1:before { content: "\e62d"; }

.icon-jiantouyou:before { content: "\e62e"; }

.icon-jiantouxia:before { content: "\e62f"; }

.icon-right:before { content: "\e7eb"; }

.icon-left:before { content: "\e7ec"; }

.icon-up:before { content: "\e7ed"; }

.icon-down:after { content: "\e7ee"; }

4、在小程序项目根目录下新建 lib-> style -> font.wxss 文件，将 iconfont.css中的代码复制到该文件里面；

5、如果需要做全局css就在app.wxss中引入，如果只是某个页面中用到，就在该页面的wxss中引入

@import "../../lib/style/font.wxss";

6、在页面元素中写上相应的class name

<navigator class="iconfont icon-down" url="/pages/address/address?address=chooseAddress" hover-class="navigator-hover">
  {{chooseAddress}}
</navigator>

微信小程序 使用iconfont

猜你喜欢

微信小程序使用iconfont