小程序引用icon图标(入门)

iconfont网站

1.先把图标添加到项目(新建项目)

2.在page文件下 新建iconfont目录和子文件iconfont.wxss

iconfont.wxss

代码复制到浏览器,打开css文件

全部复制,放到新建的iconfont.wxss文件里

初步 iconfont.wxss

@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?t=1619416948083'); /* IE9 */
  src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?t=1619416948083#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.woff?t=1619416948083') format('woff'),
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.ttf?t=1619416948083') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.svg?t=1619416948083#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-zhaoshangxiaochengxu-mimabukejian:before {
  content: "\e62f";
}

.icon-zhaoshangxiaochengxu-shanchu:before {
  content: "\e632";
}

.icon-xiaochengxu_tubiao:before {
  content: "\e604";
}

.icon-xiaochengxu_tubiao1:before {
  content: "\e605";
}

.icon-xiaochengxu_tubiao2:before {
  content: "\e606";
}

.icon-houtaishezhi:before {
  content: "\e6d8";
}

.icon-miniappdev:before {
  content: "\e91b";
}

.icon-xiaochengxu:before {
  content: "\e685";
}

.icon-dianzan:before {
  content: "\e601";
}

然后 把这代码放到 iconfont.wxss里
完整:iconfont.wxss

@font-face {
  font-family: 'iconfont';  /* project id 2512718 */
  src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot');
  src: url('//at.alicdn.com/t/font_2512718_n1u318gm1b.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.woff') format('woff'),
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_2512718_n1u318gm1b.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.icon-zhaoshangxiaochengxu-shanchu:before {
  content: "\e632";
}

.icon-xiaochengxu_tubiao:before {
  content: "\e604";
}

.icon-xiaochengxu_tubiao1:before {
  content: "\e605";
}

.icon-xiaochengxu_tubiao2:before {
  content: "\e606";
}

.icon-houtaishezhi:before {
  content: "\e6d8";
}

.icon-miniappdev:before {
  content: "\e91b";
}

.icon-xiaochengxu:before {
  content: "\e685";
}

.icon-dianzan:before {
  content: "\e601";
}

第二步:引用

比如:在wxml文件里引用图标(图标名)

 <text>
    <text class="iconfont icon-xiaochengxu_tubiao"></text>
 </text>

(图标名 icon-xiaochengxu_tubiao )复制图表下的代码就行

第三步,在app.wxss里引用新建的iconfont.wxss文件

//注意符号格式
@import"/pages/iconfont/iconfont.wxss";

预览效果:

更多问题点赞留言,哈哈哈