如何在uni-app中引入iconfont图标

如何在uni-app中引入iconfont图标

step1

在iconfont中找到你要的图标，这里和vue其他地方引用的步骤一致，如果是第一次使用iconfont请自行百度使用方法，因为我一直使用的在线链接方式引入，所以这里也只介绍这种方式引入uni-app

step2

把下面的代码放在app.vue里面

 /* icon图标 */
    @font-face {
	  font-family: 'iconfont';  /* project id 1095188 */
	  src: url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.eot');
	  src: url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.eot?#iefix') format('embedded-opentype'),
	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.woff2') format('woff2'),
	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.woff') format('woff'),
	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.ttf') format('truetype'),
	  url('https://at.alicdn.com/t/font_1095188_lvwtknkk16s.svg#iconfont') format('svg');
	}
    .icon {
      font-size: 24upx;
      color: #000000;
      font-family: iconfont;
    }
    .icon-warning:before { // 需要使用的图标
		content: '\e604';
		font-size: 48upx;
	}

<!--在别的地方使用-->
<text class="icon icon-warning"></text>

tips

@font-face 里引用链接必须加上https，从iconfont网站复制过来的代码是默认没有的，亲测在app端是必须的！