阿里iconfont网站链接里面有很多icon图标
1.直入正题,进入官网后,点击图标管理->我的项目->创建项目
2.然后单击上传图标到项目,到达这个页面,然后就把自己在这个网站里下的SVG图片导入
3.在小程序全局app.wss中
/* 复制的代码 */
@font-face {
font-family: 'iconfont'; /* project id 1792794 */
src: url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.eot');
src: url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.woff') format('woff'),
url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1792794_kogj8g9f9p.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:40rpx;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 这里是每个图标文件 */
.icon-bianji:before{
content: '\e615';}
.icon-female:before{
content: '\e617';}
.icon-male:before{
content: '\e616';}
.icon-lianren:before{
content: '\e613';}
4.使用
<!-- view里的class类里可以修改icon的大小颜色等 -->
<view class="icon-bianji-ys">
<icon class="iconfont icon-bianji"></icon>
</view>
注意事项
- 每次在阿里iconfont那个网站里加入新icon后要使用一定要更新Uncode代码,然后重新复制到app.wxss里
- .icon-bianji:before{content: ‘\e615’;}这里的‘\e615’